CODEWITHSUNDEEP
htmliframevimeo
Real Quick
Real Quick

Reputation: 2810

Vimeo iframe not autoplaying despite correct parameters

I followed the embedding tutorial in this page but the video in my iframe is not autoplaying. I have the exact parameters put up for autoplaying and looping, but for some reason its not doing it. Here is the code:

<!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>

Here is the result on fiddle: https://jsfiddle.net/7504mu6v/

Any help would be appreciated.

Upvotes: 1

Views: 304

Answers (1)

Themodmin
Themodmin

Reputation: 455

you can only autoplay if the video is muted try adding this &muted=1 for example :

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>

Upvotes: 1

Related Questions