文章/答案/技术大牛

发布

社区首页 >问答首页 >嵌入自动全屏播放的youtube视频

问嵌入自动全屏播放的youtube视频
EN

Stack Overflow用户

提问于 2014-03-16 05:18:28

回答 4查看 145.6K关注 0票数 17

所以我想做的就是在我的网站上播放全屏视频。但我想自动播放youtube视频，并自动在全屏(浏览器窗口的大小)。我的站点导航是从一个页面滑到另一个页面的左右箭头。然后是上下滚动每一页的上下箭头。

但我唯一想做的就是全屏自动播放youtube视频，同样是浏览器窗口的大小。或者我必须亲自主持这段视频？这可能会更容易，但会占用我必须付费的带宽。无论如何，提前感谢您的帮助，干杯！

javascript

html

video

youtube

fullscreen

回答 4

Stack Overflow用户

发布于 2014-03-16 08:10:45

这里已经回答得很好了：How to make a YouTube embedded video a full page width one?

如果您将'?rel=0&autoplay=1‘添加到嵌入代码中url的末尾(如下所示)

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

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

票数 27

Stack Overflow用户

发布于 2021-07-23 19:25:32

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

Stack Overflow用户

发布于 2021-07-31 05:20:55

这将有助于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

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/22429866

复制

相似问题

问嵌入自动全屏播放的youtube视频
EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问嵌入自动全屏播放的youtube视频EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问嵌入自动全屏播放的youtube视频
EN