Javascript Youtube 嵌入的自动全屏
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7615380/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Auto-Full Screen for a Youtube embed
提问by Philip Kirkbride
I have a Youtube video embeded on a webpage.
我有一个嵌入在网页上的 Youtube 视频。
Is it possible to have the video go full screen when the user presses play, using the HTML5 iframe with Youtube's API?
当用户按下播放时，是否可以使用HTML5 iframe 和 Youtube 的 API使视频全屏显示？
Using the Chromeless player is not an option as the website is intended for iPads.
使用 Chromeless 播放器不是一种选择，因为该网站是为 iPad 设计的。
回答by mikemaccana
Update November 2013: this is possible - real fullscreen, not full window, with the following technique. As @chrisg says, the YouTube JS API does not have a 'fullscreen by default' option.
2013 年 11 月更新：这是可能的 -真正的全屏，而不是全窗口，使用以下技术。正如@chrisg 所说，YouTube JS API 没有“默认全屏”选项。
- Create a custom play button
- Use YouTube JS API to play video
- Use HTML5 fullscreen API to make element fullscreen
- 创建自定义播放按钮
- 使用 YouTube JS API 播放视频
- 使用 HTML5 全屏 API 使元素全屏
Here's the code.
这是代码。
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)();
}
})
回答by Chris G.
This isn't possible with the youtube embed code or the youtube javascript API as far as I know. You would have to write your own player to have this functionality.
据我所知，使用 youtube 嵌入代码或 youtube javascript API 是不可能的。您必须编写自己的播放器才能拥有此功能。
Doing some reading it looks like you can use the chromelessyoutube player and it will resize itself to the width and height of its parent element.
做一些阅读，看起来你可以使用chromelessyoutube 播放器，它会根据其父元素的宽度和高度调整自己的大小。
That means that if you use the chromeless player you can resize the div with javascript with the playevent is triggered.
这意味着，如果您使用 chromeless 播放器，您可以在play触发事件的情况下使用 javascript 调整 div 的大小。
回答by Teddy
No, this isn't possible, due to security concerns.
不，这是不可能的，出于安全考虑。
The end user has to do something to initiate fullscreen.
最终用户必须做一些事情来启动全屏。
If you were to run an Adobe AIR application, you can automate the fullscreen activation w/o having end user do anything. But then it would be a desktop application, not a webpage.
如果您要运行 Adobe AIR 应用程序，您可以自动进行全屏激活，而无需最终用户执行任何操作。但那将是一个桌面应用程序，而不是一个网页。
回答by Nick T
I thought I would post an easier updated method to solving this one using html5.
我想我会发布一种更简单的更新方法来使用 html5 解决这个问题。
.ytfullscreenis the name of the button or whatever you want clicked.
#yrc-player-frame-0is going to be the name of your iframe.
.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();
}
});
