Video youtube a schermo intero reattivo senza barre nere?

Question

Ho un video di YouTube a schermo intero incorporato nel mio sito web.

Sembra buono quando la dimensione del browser è proporzionale alla larghezza e l'altezza del video. Tuttavia, quando ridimensiono il browser in una proporzione diversa, ottengo barre nere attorno al video.

Quello che voglio è quello di avere il video riempia l'intera finestra in ogni momento, ma senza qualsiasi allungamento. Voglio che l'eccesso si nasconda quando la dimensione del browser non è proporzionale al video.

Quello che sto cercando di ottenere è qualcosa che si può vedere sullo sfondo di questi due siti web: http://ginlane.com/ e http://www.variousways.com/.

È possibile farlo con un video di YouTube?

Answer 1

• Controllare questo: Fullscreen video without black borders
• O questo: http://avexdesigns.com/responsive-youtube-embed/
• o questa: http://css-tricks.com/fluid-width-youtube-videos/

Answer 2

Questo è piuttosto vecchio, ma la gente può ancora bisogno di aiuto qui. Ho bisogno di questo anche così ho creato una penna della mia soluzione che dovrebbe aiutare - http://codepen.io/MikeMooreDev/pen/QEEPMv

L'esempio mostra due versioni dello stesso video, una di serie e la seconda ritagliata e centrata per adattarsi alla dimensione dell'elemento genitore completo senza mostrare le orribili barre nere.

È necessario utilizzare alcuni javascript per calcolare una nuova larghezza per il video, ma è davvero facile se si conoscono le proporzioni.

HTML

<div id="videoWithNoJs" class="videoWrapper"> 
    <iframe src="https://www.youtube.com/embed/ja8pA2B0RR4" frameborder="0" allowfullscreen></iframe> 
</div> 

CSS - L'altezza e la larghezza o l'videoWrapper può essere qualsiasi cosa, possono essere percentuali se lo desiderate

.videoWrapper { 
    height:600px; 
    width:600px; 
    position:relative; 
    overflow:hidden; 
} 

.videoWrapper iframe { 
    height:100%; 
    width:100%; 
    position:absolute; 
    top:0; 
    bottom:0; 
} 

jQuery

$(document).ready(function(){ 
    // - 1.78 is the aspect ratio of the video 
    // - This will work if your video is 1920 x 1080 
    // - To find this value divide the video's native width by the height eg 1920/1080 = 1.78 
    var aspectRatio = 1.78; 

    var video = $('#videoWithJs iframe'); 
    var videoHeight = video.outerHeight(); 
    var newWidth = videoHeight*aspectRatio; 
    var halfNewWidth = newWidth/2; 

    video.css({"width":newWidth+"px","left":"50%","margin-left":"-"+halfNewWidth+"px"}); 

}); 

Questo può anche essere attivato su ridimensionamento per assicurarsi che rimanga reattivo. Il modo più semplice (probabilmente non il più efficiente) per farlo è il seguente.

$(window).on('resize', function() { 

    // Same code as on load   
    var aspectRatio = 1.78; 
    var video = $('#videoWithJs iframe'); 
    var videoHeight = video.outerHeight(); 
    var newWidth = videoHeight*aspectRatio; 
    var halfNewWidth = newWidth/2; 

    video.css({"width":newWidth+"px","left":"50%","margin-left":"-"+halfNewWidth+"px"}); 

}); 

Answer 3

Purtroppo questo non sembra funzionare .... A meno che non mi manca qualcosa: http://codepen.io/Archie22is/pen/EWWoEM

jQuery(document).ready(function($){ 
    // - 1.78 is the aspect ratio of the video 
    // - This will work if your video is 1920 x 1080 
    // - To find this value divide the video's native width by the height eg 1920/1080 = 1.78 
    var aspectRatio = 1.78; 

    var video = $('#videoWithJs iframe'); 
    var videoHeight = video.outerHeight(); 
    var newWidth = videoHeight*aspectRatio; 
    var halfNewWidth = newWidth/2; 

    video.css({"width":newWidth+"px","left":"50%","margin-left":"-"+halfNewWidth+"px"}); 

}); 

Answer 4

sto postando questo perché le risposte di cui sopra sono per quando si ha la barre nere in alto e in basso. Cosa succede se hai le barre sui lati (sinistra e destra). Questo script si prenderà cura dei due scenari.

var vidRatio = vidWidth/vidHeight; 
var wrapperHeight = $('#videoIFrameContainer').height(); 
var wrapperWidth = $('#videoIFrameContainer').width(); 
var wrapperRatio = wrapperWidth/wrapperHeight; 
if(wrapperRatio < vidRatio){ 
    var newWidth = wrapperWidth * (vidRatio/wrapperRatio); 
    $('#videoIFrame').css({'min-height':wrapperHeight+'px', 'min-width':newWidth+'px', 'position':'absolute', 'left':'50%','margin-left':'-'+(newWidth/2)+'px'}); 

} 
else{ 
    var newHeight = wrapperHeight * (wrapperRatio/vidRatio); 
    $('#videoIFrame').css({'min-height':newHeight+'px', 'min-width':wrapperWidth+'px', 'position':'absolute', 'top':'50%','margin-top':'-'+(newHeight/2)+'px'}); 

} 

Answer 5

ho speso un sacco di tempo cercando di capire questo fuori, ma qui è una soluzione semplice CSS che funziona per me usando Flexbox. Fondamentalmente, metti il ​​video in un contenitore con posizione assoluta, larghezza e altezza al 100% e rendilo visibile: fletti e centra il contenuto!

https://medium.com/@rishabhaggarwal2/tutorial-how-to-do-full-screen-youtube-video-embeds-without-any-black-bars-faa778db499c

Answer 6

È anche possibile utilizzare questo qui di seguito: -

<iframe class="" style="background:url(ImageName.jpg) center; background-size: 100% 140%; " allowfullscreen="" width="300" height="200"></iframe> 

Answer 7

Creare un div contenitore di tutto il codice iframe e dargli una classe di esempio:

<div class="video-container"><iframe.......></iframe></div> 

Aggiungere nel CSS :

.video-container { 
    position:relative; 
    padding-bottom:56.25%; 
    padding-top:30px; 
    height:0; 
    overflow:hidden; 
} 

.video-container iframe, .video-container object, .video-container embed { 
    position:absolute; 
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 
} 

Questo coolestguidesontheplanet.com è l'URL di origine di questa risposta.