Larghezza adattamento video HTML5 altezza O

Question

Lo width=100% height="auto" ridimensiona i miei video per adattarli all'intera larghezza della finestra del browser, ma se l'altezza della finestra è inferiore al rapporto aspetto il video viene ritagliato in altezza.

Desidero che il video sia scalabile per adattarlo a larghezza o altezza in modo da poter vedere sempre l'intero video senza ritaglio, riempiendo il rapporto più vicino (aggiungendo spazio vuoto ai lati se il rapporto tra le finestre è inferiore).

Non riesco comunque a capire come farlo.
Prima qualsiasi valore di altezza,% o px, sembra essere ignorato, non posso impostare la dimensione del tutto usando l'altezza, solo la larghezza. Lo stesso per min-larghezza/altezza.

Come si può fare?

Il mio codice:

<video id="video" width=100% height="auto" onclick=playPause()></video> 

Il video è stato caricato da JavaScript dove v è un collegamento video da un array:

video.addEventListener('play', function() { v.play();}, false); 

Answer 1

risolto io stesso con una funzione javascript:

window.addEventListener('resize', resize, false); 

video.height = 100; /* to get an initial width to work with*/ 
resize(); 

function resize() { 
videoRatio = video.height/video.width; 
windowRatio = window.innerHeight/window.innerWidth; /* browser size */ 

    if (windowRatio < videoRatio) { 
     if (window.innerHeight > 50) { /* smallest video height */ 
       video.height = window.innerHeight; 
     } else { 
      video.height = 50; 
    } 
    } else { 
     video.width = window.innerWidth; 
    } 

}; 

Answer 2

Prova avvolgendo il valore all'interno cita

<div class="videoContainer"> 
    <video id="video" width="100%" height="auto" onclick="playPause();"></video> 
</div> 

voi possibile aggiungere queste classi

.videoContainer 
{ 
    position:absolute; 
    height:100%; 
    width:100%; 
    overflow: hidden; 
} 

.videoContainer video 
{ 
    min-width: 100%; 
    min-height: 100%; 
} 

oppure utilizzare questa

video { 
    object-fit: cover; 
} 

Answer 3

C'è una grande auto di larghezza/altezza trucco chiamato intrinsic ratios che può essere utilizzato sulle immagini/video e simili! Il trucco consiste nell'avere l'elemento desiderato in un wrapper con un valore di riempimento con valore percentuale applicato a.

tuo markup sarebbe allora:

<div class="video-wrapper"> 
    <video class="video" id="video" onclick=playPause()></video> 
</div> 

E il tuo CSS:

.video-wrapper { 
    position: relative; 
    padding-bottom: 20%; 
    height: 0; 
} 

.video { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: #ccc; /* Random BG colour for unloaded video elements */ 
} 

È possibile limitare le dimensioni del vostro contenitore video giocando con min-width o max-width delle .video-wrapper stili.

Spero che questo aiuti!

Answer 4

Ho avuto un problema simile. Ho realizzato una `presentazione 'con vari oggetti come diapositive, alcuni dei quali sono video di varie dimensioni. Non ho trovato alcuna soluzione concettuale, quindi ho trovato un trucco.

ho esplicitamente specificato tutte le dimensioni reali video in tag e raccolto le informazioni di tutti loro:

var vids = document.getElementsByClassName("vid"); // videos 
var vidl = vids.length; 
var vidH = [ ]; 
var vidW = [ ]; 

// Get original widths and heights of videos 
for (i=0; i<vidl; i++) { // > 
    vidH.push(vids[i].height); 
    vidW.push(vids[i].width); 
} 

Poi (quando necessario) definisco la dimensione della finestra come segue:

// Current inner height of the browser window (in pixels) 

var iH = window.innerHeight 
     || document.documentElement.clientHeight 
     || document.body.clientHeight; 
// Current inner width of the browser window (in pixels) 
var iW = window.innerWidth 
     || document.documentElement.clientWidth 
     || document.body.clientWidth; 

Per ridimensionare un rettangolo in un altro rettangolo dobbiamo trovare una scala minima:

var r, rh, rw; 

// Scale videos to fit window 
for (i=0; i<vidl; i++) { // > 
    rh=iH/vidH[i]; rw=iW/vidW[i]; r=Math.min(rh, rw); 
    if (rh>rw) { 
     vids[i].height=Math.floor(vidH[i]*r); 
     vids[i].width=iW; 
    } 
    else { 
     vids[i].height=iH-5; 
     vids[i].width=Math.floor(vidW[i]*r); 
    } 
} 

Unfotunately, qui apparve uno spazio in più; in FireFox ho trovato il suo valore minimo come 5 che nega il valore di altezza di windows (iH) come la nuova dimensione del video.