所以我想做的是在我的网站上播放全屏视频。但我想自动播放 youtube 视频并自动全屏显示（浏览器窗口的大小）。我的站点导航是从一个页面滑动到另一个页面的左右箭头。然后向上和向下箭头滚动每一页。
但我唯一想做的就是全屏自动播放 youtube 视频，同样是浏览器窗口的大小。还是我必须自己主持视频？这可能更容易，但会占用我必须支付的带宽。无论如何，提前感谢您的帮助，干杯！
这里回答得很好：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 的演示。
我找到了 2 种在 HTML 中嵌入 YouTube 视频的解决方案
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>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>这将有助于
autoplay// 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>我能够通过使用 html 窗口对象的简单 JavaScript 函数来做到这一点。别问内容，我是做表情包的，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>