javascript - YouTube iframe API : can't make it responsive

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，而不是将iframe插入到该div中。
另外，在您的 YT.Player 调用中，我会包含高度/宽度 100% 调用，例如

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

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

祝你好运!