我有一个嵌入在网页上的 Youtube 视频。
当用户按下播放键时，是否可以使用HTML5 iframe 和 Youtube 的 API使视频全屏显示？
使用 Chromeless 播放器不是一种选择，因为该网站是为 iPad 设计的。
Youtube 嵌入的自动全屏
IT技术
javascript
ipad
html
youtube
embed
2021-03-14 23:41:02
4个回答
2013 年 11 月更新：这是可能的 -真正的全屏，而不是全窗口，使用以下技术。正如@chrisg 所说，YouTube JS API 没有“默认全屏”选项。
- 创建自定义播放按钮
- 使用 YouTube JS API 播放视频
- 使用 HTML5 全屏 API 使元素全屏
这是代码。
var $ = document.querySelector.bind(document);
// Once the user clicks a custom fullscreen button
$(playButtonClass).addEventListener('click', function(){
// Play video and go fullscreen
player.playVideo();
var playerElement = $(playerWrapperClass);
var requestFullScreen = playerElement.requestFullScreen || playerElement.mozRequestFullScreen || playerElement.webkitRequestFullScreen;
if (requestFullScreen) {
requestFullScreen.bind(playerElement)();
}
})
据我所知，使用 youtube 嵌入代码或 youtube javascript API 是不可能的。您必须编写自己的播放器才能拥有此功能。
做一些阅读，看起来您可以使用chromeless youtube 播放器，它会根据其父元素的宽度和高度调整自身大小。
这意味着，如果您使用 chromeless 播放器，您可以在play触发事件的情况下使用 javascript 调整 div 的大小。
不，这是不可能的，出于安全考虑。
最终用户必须做一些事情来启动全屏。
如果您要运行 Adobe AIR 应用程序，您可以自动全屏激活，而无需最终用户执行任何操作。但那将是一个桌面应用程序，而不是一个网页。
我想我会发布一种更简单的更新方法来使用 html5 解决这个问题。
.ytfullscreen是按钮的名称或您想要单击的任何名称。
#yrc-player-frame-0将是您的 iframe 的名称。
jQuery(".ytfullscreen").click(function () {
var e = document.getElementById("yrc-player-frame-0");
if (e.requestFullscreen) {
e.requestFullscreen();
} else if (e.webkitRequestFullscreen) {
e.webkitRequestFullscreen();
} else if (e.mozRequestFullScreen) {
e.mozRequestFullScreen();
} else if (e.msRequestFullscreen) {
e.msRequestFullscreen();
}
});