2017-10-09 1 views
0

특정 크기의 div에서 youtube apis로 YouTube 비디오를 초기화했습니다. 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> 

추가 참조 :

관련 문제