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

我几天前自己做了这项工作，不幸的是项目目前受到保护，或者我会分享这个网址。

如果你包含你正在使用的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上不能有固定的像素大小。＆＃39; .video-container iframe＆＃39; CSS是设置宽度和高度（100％x 100％，即流体）的原因。

Answer 3

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

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

Answer 4

将高度和宽度设置为100％并使用您的CSS设置响应

＆＃13;

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

＆＃13;

在youtube api中，宽度：100％是有效的，但是高度必须设置为px或其他，所以你需要设置div。

This就是一个例子。

Answer 5

我通过以下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%;
}

在 iframe 标签的父级中添加了“ 视频容器”类

Answer 6

最后我能搞清楚。我通过JavaScript调整了视频大小，但在readyEvent被解雇后。

YouTube iframe API：无法使其响应

6 个答案: