CODEWITHSUNDEEP
javascripthtmlvideoyoutubefullscreen
user2878169
user2878169

Reputation: 355

Embed youtube videos that play in fullscreen automatically

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!

Upvotes: 23

Views: 180643

Answers (5)

hk_grub
hk_grub

Reputation: 3

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>

Upvotes: 0

Dpk
Dpk

Reputation: 645

I found 2 solutions for embedding YouTube video in HTML

  1. 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>

  1. With JS (prefer this) See codepen

Upvotes: 1

user
user

Reputation: 1070

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>

Upvotes: 0

TheCodeExpert
TheCodeExpert

Reputation: 124

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>

Upvotes: -1

John Karasinski
John Karasinski

Reputation: 1006

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.

Upvotes: 30

Related Questions