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

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

有没有设置参数可以移除它们?

1个回答

11

您可以参考这个线程。这段代码将为您提供一个填充其所在容器的视频,并自动缩放高度。

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

其他参考资料:


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接