如何使用 div 容器适应 Youtube 视频大小

Question

我已经在具有特定尺寸的 div 中使用 youtube apis 初始化了一个 youtube 视频。是否可以显示视频，因为它是设置为 div 背景大小封面的图像？我的意思是没有任何黑色空间。

在下面您可以找到实际结果和我使用的代码。

代码：

var player123;

if(jQuery('#player123')){
    bindVideo();
}



function bindVideo(){

    var playerHeight = "500px";
    if(jQuery(window).width() < 1023){
        playerHeight = "100%";
    }else{
        playerHeight = "400px";
    }
    jQuery(window).resize(function(){
        if(jQuery(window).width() < 1023){
            playerHeight = "100%";
        }else{
            playerHeight = "400px";
        }
    });
    player123 = new YT.Player('player123', {
        height: playerHeight,
        width: '100%',
        videoId: 'video-id-here',
        events: {
            'onReady': onPlayerReady(event),
            'onStateChange': onPlayerStateChange
        },
        playerVars:{
            rel:0,
            loop:1,
            showinfo:0,
            controls:0,
            disablekb:1
        }
    });
}

// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
    //event.target.playVideo();
}

// 5. The API calls this function when the player's state changes.
//    The function indicates that when playing a video (state=1),
//    the player should play for six seconds and then stop.
var done = false;
function onPlayerStateChange(event) {
    if(event.data == "2"){
        pauseVideo();
    }else if(event.data == "0"){
        stopVideo();
    }
}

function stopVideo() {
    jQuery("#player-overlay").show();
    player123.stopVideo();
}
function PlayVideo2(){
    jQuery("#player-overlay").hide();
    player123.playVideo();
}
function pauseVideo(){
    jQuery("#player-overlay").show();
    player123.pauseVideo();
}

是否有任何参数可以设置以删除它们？

Answer 1

你可以参考这个线程。此代码将为您提供一个视频，该视频填充它所在的容器，并且也会自动缩放高度。

.video-wrapper {position: relative; padding-bottom: 56.25%; /* 16:9 */  padding-top: 25px;}
.video-wrapper iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

<div class="video-wrapper">
  <iframe src="http://www.youtube.com/embed/AddHereVideoId?autoplay=1&amp;html5=1" frameborder="0" allowfullscreen></iframe>
</div>

补充参考：

• 流体宽度视频
• 将 YouTube 视频缩小到响应宽度