===========================================================================
YA QUEDÓ, GRACIAS
En el banner del sitio web que estoy haciendo coloqué un vídeo, esta llenando un div con la mismas proporciones de width y height.
.slider { <!-- Esté es el estilo del slider en general -->
width: 100%;
margin: auto;
height: 95.5vH;
z-index: 900;
font-family: Raleway;
}
video {
width: 100% !important;
height: 95vH !important;
box-sizing: border-box !imprtant;
margin: auto;
object-fit: cover;
object-position: center;
}
<div id="slide1">
<div class="video-responsive">
<video id="vid" class="video" loop="loop" muted="muted" autoplay="autoplay">
<source src="Videos/VideoPVManpower_rev0.mp4" type="video/mp4" />
Tu navegador no soporta video HTML5.
</video>
<canvas class="canvas"></canvas>
</div>
<script src="JavaScript/canvas-video-player.js"></script>
<script>
var isIOS = /iPad|iPhone|iPod/.test(navigator.platform);
if (isIOS) {
var canvasVideo = new CanvasVideoPlayer({
videoSelector: '.video',
canvasSelector: '.canvas',
timelineSelector: false,
autoplay: true,
makeLoop: true,
pauseOnClick: false
});
}else {
// Use HTML5 video
document.querySelectorAll('.canvas')[0].style.display = 'none';
}
</script>
</div>
Funciona a la perfección sobre Chrome, pero no funciona del todo bien en Internet Explorer ¿Que puedo hacer para que cumpla la misma función sobre IE?
Cualquier otra recomendación diferente a mi duda es bienvenida.
box-sizing: border-box !imprtant;
tiene que serbox-sizing: border-box !important;
Te falta una "o", la propiedad de css que mencionas no la soporta internet explorer en varias versiones. Prueba solo dejando en la etiqueta video la propiedadwidth = 100%
me parece.width = 100%
si llena el ancho de la pantalla, pero no solo el 95% del alto del viewport,que es lo que que quiero hacer.