Sfondo a larghezza intera Video in Internet Explorer

Sto progettando un sito Web che utilizza un video di background ospitato in un contenitore di larghezza pari al 100%. Funziona perfettamente in Chrome e Firefox ma fallisce miseramente in IE (testato in IE 11).Sfondo a larghezza intera Video in Internet Explorer

Il video dovrebbe allungare la larghezza per riempire il contenitore, mantenendo le proporzioni del video, tuttavia, IE posiziona semplicemente il video nel contenitore alla dimensione necessaria per riempire il contenitore verticalmente.

Link to Page with Error

fonte

2015-12-17 digitalJE5U5

provare ad aggiungere un meta tag su html nella sezione head .. – yjs

È possibile utilizzare questo spero che funziona per voi :)

This is html code : 
<div class="video-frame"> 
<video class="video-box" autoplay poster="video-back.jpg" id="bgvid" loop> 
<source src="sample.webm" type="video/webm"> 
<source src="sample.mp4" type="video/mp4"> 
</video> 
</div> 

This is css code : 
.video-frame { position:relative;margin:40px auto;width:100%;} 
.video-box { position: fixed; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -100; transform: translateX(-50%) translateY(-50%); background: url('video-back.jpg') no-repeat; background-size: cover; transition: 1s opacity;}

fonte

2015-12-17 06:44:12 BANTIMATHUR

/*you can use this css.*/ 

.fullwidth-video { 
position: absolute; 
top: 0; 
left: 0; 
z-index: 1; 
min-height: 100%; 
min-width: 100%; 
-webkit-transform-style: preserve-3d; 
} 
.fullwidth-video video { 
position: absolute; 
top: 0; 
left: 0; 
z-index: 1; 
min-height: 100%; 
min-width: 100%; 
height: auto; 
width: 100%; 
object-fit: cover; 
}

codice html qui ...

 <div class="fullwidth-video"> 
    <video preload="auto" autoplay loop muted=""> 
     <source src="http://sawyerfirm.ignitte.com/wp-content/uploads/2015/12/Girl-Riding-In-Car-8-BW.mp4" type="video/mp4"> 
     <source src="http://sawyerfirm.ignitte.com/wp-content/uploads/2015/12/Girl-Riding-In-Car-8-BW.webm" type="video/webm"> 
    </video> 
    </div>

fonte

2015-12-17 07:18:48

risolto

ho avuto lo stesso problema per la larghezza in IE: la soluzione che ho trovato è la rimozione del css personalizzato aggiuntivo applicato sopra il tag <video>.

Questo molto codice dovrebbe funzionare:

<!DOCTYPE html> 
 
<html> 
 

 
<body> 
 

 
<video width="100%" height="" autoplay> 
 
    <source src="http://sawyerfirm.ignitte.com/wp-content/uploads/2015/12/Girl-Riding-In-Car-8-BW.mp4" type="video/mp4"> 
 
    Your browser does not support the video tag. 
 
</video> 
 

 
</body> 
 

 
</html>

quindi provare a rimuovere ogni ulteriore classe/stile applicato sopra/dentro il tag

fonte

2017-02-23 11:10:54

Sfondo a larghezza intera Video in Internet Explorer

risposta

Problemi correlati