2017-10-09 139 views
0

我已经用特定尺寸的div将youtube apis初始化为一个div。是否可以显示视频,因为它将图像设置为div的背景大小的封面?我的意思是没有任何黑色空间。如何使用div容器填充Youtube视频尺寸

下面您可以找到实际结果和我使用的代码。 Image with black spaces

代码:

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

是否有任何参数设置将其删除?

回答

0

您可以参考这个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> 

其他参考: