html 嵌入自动全屏播放的YouTube视频

j8ag8udp 于 2023-04-18 发布在其他

关注(0)|答案(4)|浏览(210)

因此，我想做的是在我的网站上有全屏视频。但我想自动播放YouTube视频，并自动全屏（浏览器窗口的大小）。我的网站导航是从一页到另一页滑动的左箭头和右箭头。然后上下滚动每个页面的上下箭头。
但我唯一想做的是全屏自动播放youtube视频，再次，浏览器窗口的大小。或者我将不得不自己托管视频？这可能更容易，但会占用带宽，我将不得不支付。无论如何，提前感谢您的帮助，干杯！

Html

来源：https://stackoverflow.com/questions/22429866/embed-youtube-videos-that-play-in-fullscreen-automatically

4条答案

按热度按时间

eivnm1vs1#

这一点在这里得到了很好的回答：How to make a YouTube embedded video a full page width one?
如果在嵌入代码中的URL末尾添加'？rel=0&autoplay=1'（像这样）

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

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

赞(0）回复(0）举报 2023-04-18

9cbw7uwe2#

我找到了2个在HTML中嵌入YouTube视频的解决方案
1.只有HTML没有JS
在该解决方案中，我们在iframe参数中设置players选项

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.使用JS（首选此）See codepen

赞(0）回复(0）举报 2023-04-18

s4chpxco3#

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）回复(0）举报 2023-04-18

ff29svar4#

这将有助于autoplay视频加载，并将使其全屏，但由于Chrome自动播放策略，视频运行将不得不静音。

// 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）回复(0）举报 2023-04-18

我来回答

html 嵌入自动全屏播放的YouTube视频

4条答案

相关问题

热门标签

最新问答