如何使用 div 容器调整 Youtube 视频大小答案

【问题标题】：How to fit Youtube video size with div container如何使用 div 容器调整 Youtube 视频大小
【发布时间】：2018-03-20 23:32:26
【问题描述】：

我已经在具有特定尺寸的 div 中使用 youtube api 初始化了一个 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();
}

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

【问题讨论】：

标签： javascript youtube youtube-api

【解决方案1】：

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

.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>

其他参考资料：

【讨论】：