javascript YouTube iframe API：无法响应
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22798352/
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
YouTube iframe API: can't make it responsive
提问by CV-Gate
I'm trying to implement a Youtube video via the iFrame API. I need to catch some events so embedding the player alone is not an option.
我正在尝试通过 iFrame API 实现 Youtube 视频。我需要捕捉一些事件，因此单独嵌入播放器不是一种选择。
Everything is working fine as explained in the docs, I'm calling the video like this:
如文档中所述，一切正常，我将视频称为这样：
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
if($("#video_1").length){
player = new YT.Player('video_1', {
videoId: 'BmsPsdVmkSw',
playerVars: { 'autoplay': 1, 'controls': 0, 'info': 0, 'rel': 0, 'wmode': 'transparent' },
events: {
'onStateChange': goToVS
}
});
}
The problem is that I need to make the video adapt to the screen width to look good on phones and tablets, but after trying things like this with CSS:
问题是我需要让视频适应屏幕宽度才能在手机和平板电脑上看起来不错，但是在用 CSS 尝试了这样的事情之后：
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.video-container iframe, .video-container object, .video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
And this with JavaScript: http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php
这与 JavaScript：http: //css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php
I can't make it work. Any of the tricks before work fine on a normal Youtube embed code but they don't with the iframe API.
我不能让它工作。在正常的 Youtube 嵌入代码上工作之前的任何技巧都可以，但它们不适用于 iframe API。
Any idea?
任何的想法？
Thanks!
谢谢！
回答by Will
I've made this work myself a few days ago, project is currently pw-protected unfortunately or I'd share the URL.
几天前我自己完成了这项工作，不幸的是，项目目前受密码保护，否则我会分享 URL。
It would help if you'd include the HTML you are using because I suspect that's where your problem is. The responsive end of this can be pure CSS; based on javascript/css, it should be something like this:
如果您包含正在使用的 HTML 会有所帮助，因为我怀疑这就是您的问题所在。响应端可以是纯 CSS；基于javascript/css，它应该是这样的：
<div class=video-container>
<div id=video_1></div>
</div>
The problem that is easy to run into is that YT.Player replaces the named div with an iframe rather than inserting an iframe into that div.
also, in your YT.Player call I'd include height/width 100% calls, eg
很容易遇到的问题是，YT.Player 用 iframe 替换了命名的 div，而不是将 iframe 插入到该 div 中。
另外，在您的 YT.Player 调用中，我会包含高度/宽度 100% 的调用，例如
new YT.Player('video_1', {
videoId: 'BmsPsdVmkSw',
height: "100%",
width: "100%"
but that may be unnecessary given the css definition you've already made.
但考虑到您已经做出的 css 定义，这可能是不必要的。
Good luck!
祝你好运！
回答by jswitchback
Your setting the width and height of the iframe (1280x720). There can not be fixed pixel sizes on the iframe. The '.video-container iframe' CSS is what sets the width and height (100% x 100%, ie fluid).
您设置 iframe (1280x720) 的宽度和高度。iframe 上不能有固定的像素大小。'.video-container iframe' CSS 用于设置宽度和高度（100% x 100%，即流体）。
回答by Kael
Set the height and width to 100% And use your css to set responsive
将高度和宽度设置为 100% 并使用您的 css 设置响应式
----------------On Html ----------------------
<div id="ytplayer1" class"[your-class-name]">
----------------On CSS ----------------------
.[your-class-name] {width:100%;height:400px;}
@media screen and (max-width: 450px) {
.[your-class-name] {width:100%;height:180px;}
}
@media screen and (max-width: 768px) {
.[your-class-name] {width:100%;height:325px;}
}
----------------On Javascript ----------------------
player1 = new YT.Player('ytplayer1', {
height: '100%',
width: '100%',
playerVars: {
enablejsapi: 1,
showinfo: '1',
autoplay: '0'
},
events: {
'onReady': onPlayerReady1
}
});In youtube api, width: 100% is work, but in height must set in px or other, so you need set up the div.
在 youtube api 中，width: 100% 是可行的，但高度必须设置为 px 或其他，因此您需要设置 div。
Thisis an example.
这是一个例子。
回答by Sahil Ralkar
I solve the responsiveness with the following CSS
我用以下 CSS 解决了响应问题
.video-container {
float: none;
clear: both;
width: 100%;
position: relative;
padding-bottom: 56.25%;
padding-top: 25px;
height: 0;
}
.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
added 'video-container' class to the parentof the iframetag
增加了“视频容器”类的父的的IFRAME标签
回答by user3099071
You can use player.setSize()to update the player size after the player object has been created.
您可以player.setSize()在创建播放器对象后使用它来更新播放器大小。
https://developers.google.com/youtube/iframe_api_reference#Playback_controls
https://developers.google.com/youtube/iframe_api_reference#Playback_controls
回答by CV-Gate
Finally I could figure it out. I resized the video through JavaScript but after the readyEventwas fired.
终于我想通了。我通过 JavaScript 调整了视频的大小，但在readyEvent被解雇后。
