尽管参数正确，Vimeo iframe 不自动播放

Question

我遵循了此 page 中的嵌入教程，但我的 iframe 中的视频无法自动播放。我为自动播放和循环设置了确切的参数，但由于某种原因它没有这样做。这是代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style>
        body{ 
            margin: 0px; 
        }
        #bg-container{ 
            background: black;
            height: 100vh; 
            overflow: hidden; 
        }

        #overlay {
            opacity: 0;
            filter: alpha(opacity = 0);
            position:absolute;
            top:0; bottom:0; left:0; right:0;
            display:block;
            z-index:2;
            background:transparent;
            color: #FFF; 
        }

        #content{ 
            position: absolute; 
            top: 0px; 
            bottom: 0px; 
            left: 0px; 
            right: 0px; 
            overflow: hidden; 

        }

        #image{ 
            height: 23%;
            width: auto;
            position: absolute;
            left: 50%;
            bottom: 2%;
            transform: translate(-50%);
        }
    </style>
</head>
<body>
    <div id="bg-container">
        <iframe 
            class="bg"
            src="https://player.vimeo.com/video/544703738?autoplay=1&loop=1&autopause=0" 
            width="100%" 
            height="100%" 
            frameborder="0" 
            title="Background Vid 2" 
            webkitallowfullscreen 
            mozallowfullscreen 
            allowfullscreen
        >       
        </iframe>
    </div>
    <div id="overlay"></div>    
    <div id="content">
        <img id="image" src="https://contenthub-static.grammarly.com/blog/wp-content/uploads/2018/05/how-to-ask-for-help-760x400.jpg"></img>
    </div>
</body>

这是 fiddle 的结果：https://jsfiddle.net/7504mu6v/

如有任何帮助，我们将不胜感激。

Answer 1

您只能在视频静音时自动播放尝试添加此 &muted=1 例如：

https://player.vimeo.com/video/544703738?autoplay=1&loop=1&autopause=0&muted=1

body{ 
                margin: 0px; 
            }
            #bg-container{ 
                background: black;
                height: 100vh; 
                overflow: hidden; 
            }

            #overlay {
                opacity: 0;
                filter: alpha(opacity = 0);
                position:absolute;
                top:0; bottom:0; left:0; right:0;
                display:block;
                z-index:2;
                background:transparent;
                color: #FFF; 
            }

            #content{ 
                position: absolute; 
                top: 0px; 
                bottom: 0px; 
                left: 0px; 
                right: 0px; 
                overflow: hidden; 

            }

            #image{ 
                height: 23%;
                width: auto;
                position: absolute;
                left: 50%;
                bottom: 2%;
                transform: translate(-50%);
            }

<div id="bg-container">
            <iframe 
                class="bg"
                src="https://player.vimeo.com/video/544703738?autoplay=1&loop=1&autopause=0&muted=1" 
                width="100%" 
                height="100%" 
                frameborder="0" 
                title="Background Vid 2" 
                webkitallowfullscreen 
                mozallowfullscreen 
                allowfullscreen
            >       
            </iframe>
        </div>
        <div id="overlay"></div>    
        <div id="content">
            <img id="image" src="https://contenthub-static.grammarly.com/blog/wp-content/uploads/2018/05/how-to-ask-for-help-760x400.jpg"></img>
        </div>

尽管参数正确，Vimeo iframe 不自动播放

Vimeo iframe not autoplaying despite correct parameters

html

iframe

vimeo