ridimensiona il video HTML5 e interrompi le proporzioni per riempire tutto il sito

Voglio utilizzare un video 4: 3 come sfondo di un sito, ma impostare la larghezza e l’altezza al 100% non funziona, poiché le proporzioni sono mantenute intatte, quindi il video non riempie l’intera larghezza del sito.

Grazie per l’aiuto!

ecco il mio codice html e css

html:

    html 5 video test    

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

css:

 body { background-color:#000000; } #vidtest { position: fixed; top: 0px; left: 0px; right: 0px; bottom: 0px; width: 200%; height: 100%; z-index: -1000; } .cv { width: 800px; position:relative; text-align:center; margin-top: 100px; color:#FFFFFF; font-family:"Arial"; font-size: 10px; line-height: 2em; text-shadow: 3px 3px 2px #383838; margin-left: auto; margin-right: auto; } 

questo è un thread molto vecchio, lo so, e quello che sto proponendo non è necessariamente la soluzione che stai cercando, ma per tutte le persone che atterrano qui per cercare ciò che ho cercato: ridimensionare il video per riempire l’elemento del contenitore video, mantenendo rapporto intatto

Se vuoi che il video riempia le dimensioni dell’elemento ma il video sia ridimensionato correttamente per riempire il contenitore mantenendo intatte le proporzioni, puoi farlo con i CSS usando object-fit . Proprio come le background-size di sfondo per le immagini di sfondo puoi usare quanto segue:

 video { width: 230px; height: 300px; object-fit: cover; } 

Spero che questo possa essere d’aiuto per alcune persone.

EDIT: funziona nella maggior parte dei browser ma IE

http://dev.opera.com/articles/view/everything-you-need-to-know-about-html5-video-and-audio/

[…] allo stesso modo dell’elemento img: se si imposta solo uno di larghezza e altezza, l’altra dimensione viene regolata automaticamente in modo che il video mantenga le proporzioni. Tuttavia, a differenza dell’elemento img, se si imposta larghezza e altezza su qualcosa che non corrisponde alle proporzioni del video, il video non viene allungato per riempire la casella. Invece, il video mantiene le proporzioni corrette e viene letterato all’interno dell’elemento video. Il video verrà reso il più ampio ansible all’interno dell’elemento video mantenendo le proporzioni.

Lavoro su questo in javascript confrontando il rapporto impostato sull’elemento con il video sorgente e quindi applicando una trasformazione CSS: https://gist.github.com/1219207

L’ho preso ieri e ho lottato per una risposta. Questo è in qualche modo simile al suggerimento di Jim Jeffers, ma funziona per il ridimensionamento di xey, è in syntax javascript e si basa solo su jQuery. Sembra funzionare abbastanza bene:

 function scaleToFill(videoTag) { var $video = $(videoTag), videoRatio = videoTag.videoWidth / videoTag.videoHeight, tagRatio = $video.width() / $video.height(); if (videoRatio < tagRatio) { $video.css('-webkit-transform','scaleX(' + tagRatio / videoRatio + ')') } else if (tagRatio < videoRatio) { $video.css('-webkit-transform','scaleY(' + videoRatio / tagRatio + ')') } } 

Incontrerai alcuni problemi se utilizzi i controlli nativi come puoi vedere in questo fiddle: http://jsfiddle.net/MxxAv/

Ho alcuni requisiti insoliti a causa di tutti i livelli di astrazione nel mio attuale progetto. Per questo motivo sto utilizzando un div wrapper nell'esempio e ridimensiono il video al 100% all'interno del wrapper per evitare problemi in alcuni casi angolari che ho riscontrato.

Quello che ha funzionato per me è

 video { object-fit: fill; } 

Lo uso per riempire la larghezza o l’altezza … (richiede jQuery) Questo MANTIENE le proporzioni e riempie il div. So che la domanda era di rompere l’aspetto razionale, ma non è necessario.

 var fillVideo = function(vid){ var video = $(vid); var actualRatio = vid.videoWidth/vid.videoHeight; var targetRatio = video.width()/video.height(); var adjustmentRatio = targetRatio/actualRatio; var scale = actualRatio < targetRatio ? targetRatio / actualRatio : actualRatio / targetRatio; video.css('-webkit-transform','scale(' + scale + ')'); }; 

a condizione che abbia larghezza e altezza impostate al 100% e che il contenitore div abbia overflow:hidden css overflow:hidden basta passarlo al tag video.

 var vid = document.getElementsByTagName("video")[0]; fillVideo(vid); 

L’opzione CSS corretta per questo è object-fit: contain;

L’esempio seguente estenderà un’immagine di sfondo attraverso la larghezza dello schermo (mentre BREAKING il rapporto aspetto) e mantenendo un’altezza fissa costante.

 body { background-image:url(/path/to/background.png) background-repeat: no-repeat; background-position: top center; background-size: 100% 346px; object-fit: contain; } 

Per un video nel contesto dell’OP, sarebbe quindi:

 video#vidtest { width: 100%; height: 100%; object-fit: contain; } 

Dopo un po ‘di difficoltà, questo è quello che ho finito. Scala automaticamente il video nel momento giusto.

 var videoTag = $('video').get(0); videoTag.addEventListener("loadedmetadata", function(event) { videoRatio = videoTag.videoWidth / videoTag.videoHeight; targetRatio = $(videoTag).width() / $(videoTag).height(); if (videoRatio < targetRatio) { $(videoTag).css("transform", "scaleX(" + (targetRatio / videoRatio) + ")"); } else if (targetRatio < videoRatio) { $(videoTag).css("transform", "scaleY(" + (videoRatio / targetRatio) + ")"); } else { $(videoTag).css("transform", ""); } }); 

Basta inserire quel codice in un blocco $(document).ready() .

Testato su Chrome 53, Firefox 49, Safari 9, IE 11 (IE scala in modo corretto il video, ma potrebbe fare anche altre cose divertenti intorno ad esso).