YouTube iframe API：无法响应 [英] YouTube iframe API: can't make it responsive

问题描述

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

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.

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

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

问题是我需要使视频适应屏幕宽度在手机和平​​板电脑上看起来不错，但是在使用CSS尝试了类似的方法之后：

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:

.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

And this with JavaScript: http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php

我无法使其正常运行。在正常的YouTube嵌入代码上，任何技巧都可以正常工作，但不能使用iframe API。

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.

任何想法吗？

谢谢！

推荐答案

几天前我亲自完成了这项工作，项目目前是pw-

I've made this work myself a few days ago, project is currently pw-protected unfortunately or I'd share the URL.

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

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:

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

容易遇到的问题是YT.Player用iframe代替了命名的div而不是在该div中插入iframe。

，在您的YT.Player调用中，我还将包括高度/宽度100％的调用，例如

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

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

但是鉴于您已经定义了CSS定义，这可能是不必要的。

but that may be unnecessary given the css definition you've already made.

祝你好运！

这篇关于YouTube iframe API：无法响应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！