使用 iframe 和 javascript API 制作 youtube 视频全屏
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15114884/
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
Make youtube video fullscreen using iframe and javascript API
提问by Horen
I have an embedded youtube video with hidden controls:
我有一个带有隐藏控件的嵌入式 YouTube 视频：
<iframe id="ytplayer" type="text/html" width="400" height="225"
src="http://www.youtube.com/embed/dMH0bHeiRNg?rel=0&controls=0&showinfo=0
&loop=1&hd=1&modestbranding=1&enablejsapi=1&playerapiid=ytplayer"
frameborder="0" allowfullscreen></iframe>
I can control it with the youtube Javascript API.
我可以使用 youtube Javascript API 来控制它。
var tag = document.createElement('script');
tag.src = "//www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('ytplayer', {
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
Things like player.playVideo()and so on work perfectly. Now I am looking for a way to make the video play in fullscreen mode with a Javascript call but I couldn't find any method in the API.
诸如此类的事情player.playVideo()完美地工作。现在我正在寻找一种通过 Javascript 调用以全屏模式播放视频的方法，但我在 API 中找不到任何方法。
Is it even possible (without the controls) and if so - how?
甚至有可能（没有控件），如果有 - 如何？
回答by Alkindus
This worked perfect in my case. You can find more details on this link: demo on CodePen
这对我来说很完美。您可以在此链接上找到更多详细信息：CodePen 上的演示
var player, iframe;
var $ = document.querySelector.bind(document);
// init player
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '200',
width: '300',
videoId: 'dQw4w9WgXcQ',
events: {
'onReady': onPlayerReady
}
});
}
// when ready, wait for clicks
function onPlayerReady(event) {
var player = event.target;
iframe = $('#player');
setupListener();
}
function setupListener (){
$('button').addEventListener('click', playFullscreen);
}
function playFullscreen (){
player.playVideo();//won't work on mobile
var requestFullScreen = iframe.requestFullScreen || iframe.mozRequestFullScreen || iframe.webkitRequestFullScreen;
if (requestFullScreen) {
requestFullScreen.bind(iframe)();
}
}
回答by mikemaccana
I've added code to do fullscreen (real full screen, not full window) to my answer on Auto-Full Screen for a Youtube embed.
我在Auto-Full Screen for a Youtube embed 的回答中添加了代码来执行全屏（真正的全屏，而不是全窗口）。
YouTube don't expose fullscreen in their API, but you can call the native browser requestFullScreen() function from the playerStateChange() event from the YouTube API or make your own custom play button like I have.
YouTube 不会在他们的 API 中公开全屏，但您可以从 YouTube API 的 playerStateChange() 事件调用本机浏览器 requestFullScreen() 函数，或者像我一样制作自己的自定义播放按钮。
回答by Zaffy
You can use html5 fullscreen api:
您可以使用 html5 全屏 api：
node.requestFullScreen();
document.cancelFullScreen();
document.fullScreen; // bool
But note that:
但请注意：
- this usually requires vendor specific prefix like
mozRequestFullScreen()orwebkitRequestFullScreen requestFullScreenhas to be called on user events (like onclick)- in firefox the fullscreen will be black until "Allow" is clicked by user
- 这通常需要供应商特定的前缀，如
mozRequestFullScreen()或webkitRequestFullScreen requestFullScreen必须在用户事件上调用（如 onclick）- 在 Firefox 中，全屏将是黑色的，直到用户单击“允许”
回答by hkk
Looking at the API reference for the iframeplayer, I don't think it's possible to set it to fullscreen (with the iframeAPI alone)- ctrl fdidn't find fullscreen, so either it's a secret method hidden inside the API or it doesn't exist. However, as you probably know, you can set the size of the player player.setSize(width:Number, height:Number):Object, then make the window fullscreen.
查看iframe播放器的 API 参考，我认为不可能将其设置为全屏（iframe仅使用API）-ctrl f没有找到全屏，因此它要么是隐藏在 API 中的秘密方法，要么不存在. 但是，您可能知道，您可以设置播放器的大小player.setSize(width:Number, height:Number):Object，然后使窗口全屏。
回答by David Heijl
Maybe have a look at this similar question. It looks as though this might work for you (using the javascript fullscreen api rather than the Youtube API):
也许看看这个类似的问题。看起来这可能对您有用（使用 javascript fullscreen api 而不是 Youtube API）：
回答by Vidoz
You can try setting the iframe dimension to the window dimension through javascript.
您可以尝试通过 javascript 将 iframe 尺寸设置为窗口尺寸。
Something like this (using jQuery):
像这样（使用jQuery）：
$('ytplayer').attr('width', $(window).width());
$('ytplayer').attr('height', $(window).height());
I hope this can help you.
我希望这可以帮助你。
