YouTube iframe API：无法使其响应

Question

我正在尝试通过 iFrame API 实现 Youtube 视频。我需要捕捉一些事件，因此不能单独嵌入播放器。

一切正常，如文档中所述，我这样称呼视频：

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
        }
    });
}

问题是我需要让视频适应屏幕宽度才能在手机和平​​板电脑上看起来不错，但是在使用 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%;
}

这与 JavaScript：http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php

我不能让它工作。之前的任何技巧都可以在普通的 Youtube 嵌入代码上正常工作，但它们不适用于 iframe API。

有什么想法吗？

谢谢！

Answer 1

几天前我自己完成了这项工作，不幸的是，该项目目前受到 pw 保护，否则我会分享 URL。

如果您包含您正在使用的 HTML 会有所帮助，因为我怀疑这就是您的问题所在。这个的响应端可以是纯 CSS；基于javascript/css，应该是这样的：

<div class=video-container>
    <div id=video_1></div>
</div>

容易遇到的问题是 YT.Player 将命名的 div 替换为 iframe，而不是在该 div 中插入 iframe。
另外，在您的 YT.Player 通话中，我会包括 height/width 100% 通话，例如

new YT.Player('video_1', {
    videoId: 'BmsPsdVmkSw',
    height: "100%",
    width: "100%"

但是考虑到您已经做出的 css 定义，这可能是不必要的。

祝你好运！

Answer 2

我用下面的 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%;
}

将“video-container”类添加到iframe标签的parent

Answer 3

将高度和宽度设置为 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
          }
        });

在 youtube api 中，width: 100% 是可以的，但在 height 中必须设置为 px 或其他，所以你需要设置 div。

This 就是一个例子。

Answer 4

您设置 iframe (1280x720) 的宽度和高度。 iframe 上不能有固定的像素大小。 '.video-container iframe' CSS 用于设置宽度和高度（100% x 100%，即流体）。

Answer 5

您可以在创建播放器对象后使用player.setSize() 更新播放器大小。

https://developers.google.com/youtube/iframe_api_reference#Playback_controls

Answer 6

我终于弄明白了。我通过 JavaScript 调整了视频的大小，但在 readyEvent 被触发之后。