Embed youtube videos that play in fullscreen automatically

Asked 15/3, 2014 at 21:18 Answered 3/5, 2023 at 2:30

javascript html video youtube fullscreen

So what I'm trying to do is have fullscreen video across my website. But I would like to auto play a youtube video and automatically in fullscreen (The size of the browser window). My site navigation is left and right arrows that slide from page to page. Then up and down arrows that scroll up and down each page.

But the only thing I'm trying to get done is autoplay a youtube video in fullscreen, again, the size of the browser window. Or am I going to have to host the video myself? Which may be easier, but will take up bandwidth that I'll have to pay for. Anyway thank you in advance for your help, cheers!

Barograph answered 15/3, 2014 at 21:18 Comment(0)

This was pretty well answered over here: How to make a YouTube embedded video a full page width one?

If you add '?rel=0&autoplay=1' to the end of the url in the embed code (like this)

<iframe id="video" src="//www.youtube.com/embed/5iiPC-VGFLU?rel=0&autoplay=1" frameborder="0" allowfullscreen></iframe>

of the video it should play on load. Here's a demo over at jsfiddle.

Wobbling answered 16/3, 2014 at 0:10 Comment(0)

I found 2 solutions for embedding YouTube video in HTML

Only HTML No JS
in this solution we set players option in iframe parameter

    
        body {
            overflow-x: hidden;
        }



        .video-container {
            width: 100vw;
            height: 100vh;
            overflow: hidden;
            position: relative;
        }



        iframe {
            position: absolute;
            top: -10%;
            width: 100vw;
            height: 117vh;
            pointer-events: none;
        }

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Youtube Html</title>

</head>

<body>
    <div class="video-container">

        
        <iframe
            src="https://www.youtube.com/embed/rUWxSEwctFU?mute=1&modestbranding=0&autoplay=1&autohide=1&rel=0&showinfo=0&controls=0&disablekb=1&enablejsapi=1&iv_load_policy=3&loop=1&playsinline=1&fs=0&playlist=rUWxSEwctFU"></iframe>
    </div>
</body>

</html>

With JS (prefer this) See codepen

Bary answered 9/10, 2021 at 23:16 Comment(0)

This will help to autoplay the video onload and will make it full screen but the video running will have to be muted due to the Chrome Autoplay Policy.

// https://jsfiddle.net/jlam55555/o5njka95/6/

function requestFullScreen(element) {
    // Supports most browsers and their versions.
    var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullscreen;

    if (requestMethod) { // Native full screen.
        requestMethod.call(element);
    } else if (typeof window.ActiveXObject !== "undefined") { // Older IE.
        var wscript = new ActiveXObject("WScript.Shell");
        if (wscript !== null) {
            wscript.SendKeys("{F11}");
        }
    }
}
// FullScreen function
function makeFullScreen() {
    document.getElementsByTagName("iframe")[0].className = "fullScreen";
    var elem = document.body;
    requestFullScreen(elem);
}

iframe.fullScreen {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

<body onload="makeFullScreen()">
<iframe src="https://www.youtube.com/embed/668nUCeBHyY?autoplay=1&mute=1&controls=0&rel=0" frameborder="0" allow="autoplay; picture-in-picture" title="YouTube Embed"></iframe>
</body>

Rhone answered 31/7, 2021 at 5:20 Comment(0)

I was able to do this with a simple JavaScript function using the html window object. Don't ask about the content, I was making a meme, but the fSrc() function sets the iframe width and height to be that of the window inner width and height, accomplishing the task.

<!DOCTYPE html>
<html>
<head>
    <title>Hola, Soy Dora!</title>
    <meta http-equiv="refresh" content="10; url='./ipF.html'"/>
    <script>
        function fSrc(){
            document.getElementById("yt").height = window.innerHeight;
            document.getElementById("yt").width = window.innerWidth;
        }
    </script>
</head>
<body onload="setInterval(fSrc, 10)">
    <center>
        <iframe id="yt" src="https://www.youtube.com/embed/Z9HAwEiC2NM?mute=1&autoplay=1&rel=0">
        </iframe>
    </center>
</body>
</html>

Usquebaugh answered 3/5, 2023 at 2:30 Comment(0)

-1

Chrome Doesn't Support Automatic Fullscreen But You Can Play A Video As Simple As This:

<iframe width="640" height="360" src="youryoutubeurlhere" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Thaumatology answered 23/7, 2021 at 11:25 Comment(0)

Recommended topics

Hot tags