Wie passen Youtube Videogröße mit div Container

Question

Ich habe ein Youtube-Video mit youtube Apis in einem div mit bestimmten Dimensionen initialisiert. Ist es möglich, das Video so anzuzeigen, als wäre es ein Bild, das als Hintergrundgröße für ein div festgelegt wurde? Ich meine ohne schwarze Flecken.

Hier unten finden Sie das tatsächliche Ergebnis und den Code, den ich verwendet habe.

Code:

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

Gibt es einen Parameter, sie entfernen zu setzen?

Answer 1

Sie können sich darauf beziehen thread. Dieser Code gibt dir ein Video, das den Container füllt, in dem es sich befindet, und skaliert automatisch auch die Höhe.

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

Weitere Referenzen:

• Fluid Width Video
• Shrink a YouTube video to responsive width