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

我几天前自己做了这个工作,不幸的是项目目前受到保护,或者我分享了URL.

如果你包含你正在使用的HTML会有所帮助,因为我怀疑你的问题出在哪里.响应的结束可以是纯CSS; 基于javascript/css,它应该是这样的:

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

容易遇到的问题是YT.Player用iframe替换命名的div而不是将iframe插入到该div中.
另外,在你的YT.Player调用中我会包含高度/宽度100%的调用,例如

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

但鉴于您已经制定了css定义,这可能是不必要的.

祝好运!

Answer 2

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