0

===========================================================================

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? Así luce en IE tanto en el Edge como en el otro.

Y así es como luce en Google Chrome, quiero que tenga este mismo aspecto en todos los navegadores

Cualquier otra recomendación diferente a mi duda es bienvenida.

6
  • 1
    Las imágenes ayudan, pero realmente lo útil es el código: añade tu HTML y CSS para que podamos ayudarte Commented el 12 sept. 2017 a las 15:59
  • Lee cómo crear un ejemplo mínimo verificable en el centro de ayuda y edita tu pregunta para añadir esa información.
    – Alvaro Montoro
    Commented el 12 sept. 2017 a las 16:05
  • Listo, ya incluí el HTML de mi slide y el CSS, tratare de preguntar cada vez mejor, gracias @AlvaroMontoro . Commented el 12 sept. 2017 a las 16:26
  • box-sizing: border-box !imprtant; tiene que ser box-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 propiedad width = 100% me parece.
    – cignius
    Commented el 12 sept. 2017 a las 16:30
  • @Cig solo dejando el 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. Commented el 12 sept. 2017 a las 16:40

1 respuesta 1

0

Listo, lo único que hice fue poner un

overflow: hidden;

en el las propiedades del slider general y los "dots" los puse con un

top: 95vW;

Y con eso quedó la solución, no esta llena de buenas practicas pero respondió bien en todas las resoluciones de dispositivos.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.