Embed Youtube Videos That Play In Fullscreen Automatically

March 31, 2024 Post a Comment

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

Solution 1:

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.

Solution 2:

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

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

Solution 3:

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/functionrequestFullScreen(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);
    } elseif (typeofwindow.ActiveXObject !== "undefined") { // Older IE.var wscript = newActiveXObject("WScript.Shell");
        if (wscript !== null) {
            wscript.SendKeys("{F11}");
        }
    }
}
// FullScreen functionfunctionmakeFullScreen() {
    document.getElementsByTagName("iframe")[0].className = "fullScreen";
    var elem = document.body;
    requestFullScreen(elem);
}

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

<bodyonload="makeFullScreen()"><iframesrc="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>

Solution 4:

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><htmllang="en"><head><metacharset="UTF-8" /><metahttp-equiv="X-UA-Compatible"content="IE=edge" /><metaname="viewport"content="width=device-width, initial-scale=1.0" /><title>Youtube Html</title></head><body><divclass="video-container"><iframesrc="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

Html5 Ready

Embed Youtube Videos That Play In Fullscreen Automatically

Solution 1:

Solution 2:

Solution 3:

Solution 4:

Post a Comment for "Embed Youtube Videos That Play In Fullscreen Automatically"