logo标签列表

自动全屏播放嵌入式YouTube视频

javascripthtmlvideoyoutubefullscreen
22

我的目标是让全屏视频覆盖整个网站。但我想自动播放YouTube视频并将其自动调整为全屏（即浏览器窗口的大小）。我的网站导航是左右箭头，可以从一页滑动到另一页。然后是上下箭头，可以在每个页面上下滚动。

但我唯一想要完成的事情就是在全屏模式下自动播放YouTube视频，尺寸与浏览器窗口相同。还是说我需要自己托管视频？这可能更容易，但会占用带宽，需要付费。无论如何，在此提前感谢您的帮助，谢谢！

5个回答
29
这在这里已经被很好地回答了：如何使嵌入的YouTube视频成为全页面宽度？ 如果你在嵌入代码中的url末尾添加'?rel=0&autoplay=1'（像这样），则可以实现自动播放效果：
<iframe id="video" src="//www.youtube.com/embed/5iiPC-VGFLU?rel=0&autoplay=1" frameborder="0" allowfullscreen></iframe>

这个视频应该在加载时播放。这里有一个演示，在jsfiddle上。

1

我找到了2种在HTML中嵌入YouTube视频的解决方案

  1. 仅使用HTML，无需JS
    在此解决方案中，我们在iframe参数中设置播放器选项

    
        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>

使用JS（推荐） 请查看codepen
0

Chrome不支持自动全屏，但您可以像这样简单地播放视频：

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

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>

0
我能够使用简单的JavaScript函数和html窗口对象来完成这个任务。不要问我内容是什么，我只是在制作一个梗，但fSrc()函数设置了iframe的宽度和高度为窗口内部宽度和高度，从而完成了任务。 

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接