Video youtube a schermo intero reattivo senza barre nere?

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

inserisci la descrizione dell'immagine qui

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

inserisci la descrizione dell'immagine qui

Quello che voglio è avere il video riempire l’intera finestra in ogni momento, ma senza alcun allungamento. Voglio che l’eccesso si nasconda quando la dimensione del browser non è proporzionale al video.

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

È ansible farlo con un video di YouTube?

Questo è abbastanza vecchio ma le persone potrebbero avere ancora bisogno di aiuto qui. Ne avevo bisogno anche io, quindi 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 come standard e la seconda ritagliata e centrata per adattarsi alla dimensione dell’elemento genitore completo senza mostrare le orribili barre nere.

Devi usare qualche javascript per calcolare una nuova larghezza per il video, ma è davvero facile se conosci le proporzioni.

HTML

CSS – L’altezza e la larghezza del video wrapper possono essere qualsiasi cosa, possono essere percentuali se lo si desidera

 .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 triggersto su ridimensionamento per garantire 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"}); }); 

Crea un contenitore div attorno al codice iframe e assegnagli una class es:

 

Aggiungi 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%; } 

Questa guida più cool di theplanet.com è l’URL di origine di questa risposta.

Per simulare lo stesso effetto, l’importante è mantenere le proporzioni che sono 16: 9.

HTML

  

CSS

 iframe{ width: 100%; height: calc((100vw*9) /16); } 

Questo rimuoverà le barre nere.

Ora possiamo impostare il contenitore esterno al 100% di larghezza e al 100% di altezza e hide l’overflow.

 .banner-video{ height: 100vh; overflow: hidden; } 

Ora il codice sopra funzionerà fino a quando le proporzioni della vista saranno maggiori di 16/9. Quindi dobbiamo aggiungere una query multimediale basata su proporzioni.

  @media (max-aspect-ratio: 16/9) { .banner-video{ width: 100%; overflow: hidden; } iframe{ width: calc((100vh*16)/9); height: 100vh; } } 

Dopo questo video di YouTube, manterrai le dimensioni complete della finestra a tutte le condizioni e nasconderai la parte extra di un video. Altro quindi opera è supportato in tutto il browser.

Sto postando questo perché le risposte sopra sono per quando hai le 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'}); } 

Ho passato molto tempo a cercare di capirlo, ma ecco una semplice soluzione 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

Purtroppo non sembra che funzioni … A meno che non manchi 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"}); }); 

Puoi anche usare questo sotto: –