html - Mostrar una etiqueta de video maximizada y centrada en un div

css html5-video

Question

Quiero mostrar un video por video etiqueta html5 en un div fijo. Lo maximizo usando min-height y max-height. Pero también quiero que esté centrado.

<div class="fixed-width-height">
    <video style="min-width:100%; min-height:100%;" controls autoplay>
        <source src="myvid.mpg" type="video/mp4">
        Your browser does not support the video tag
    </video>
</div>

En este momento, el div siempre muestra la parte superior / izquierda del video, dependiendo del tamaño del div. Sería mejor que siempre muestre el centro.

ACTUALIZACIÓN : La etiqueta de video ahora está centrada, gran trabajo de jbutler483 pero hay un problema con el tamaño del video dependiendo de la división de encuadre o la proporción o tamaño del video. El video no cubre toda el área o falla el centrado. Aquí hay un recorte que se ajusta a las necesidades en una caja de 400x400 pero falla a 1000x200. http://jsfiddle.net/cremers/7Lgfyg1d/6/

ACTUALIZACIÓN : Encontré una solución de trabajo para no IE: object-fit: cover; object-position:center; object-fit: cover; object-position:center; Pero me gustaría tener una solución de trabajo completa.

ACTUALIZACIÓN : Polyfill debería proporcionar la función deseada, Polyfill esto en etiquetas de video en estos días, gracias a Philip Dernovoy . ACTUALIZACIÓN : Lo siento, pero no conseguí que funcione.

Answer 1

Creo que este te ayudará ...: D

#myplayer {
 position:fixed;
 top:25%;
 left:25%;
 bottom:25%;
 right:25%;
 display:block;
 background:#000;
}
#defaultplayer {
 position:absolute;
 height:99%;
 width:99%;
 background:#000;
}

<div id="myplayer"><video id="defaultplayer" src="your url" controls></video></div>

Answer 2

Creo que esto es lo que buscas ..

    .fixed-width-height {
        margin: 3px 0px 8px 10px;
        position: relative;
        width: 100%;
    }
    .child {
        width: 100%;
        height: 100%;
        position: relative;
        border: 1px #ef7f1b solid;
        padding: 6px;
    }

<div class="fixed-width-height">
<video class="child" controls="" autoplay="">
    <source src="http://beginwithsoftware.com/free-hd-720p-1080p-mp4-video-downloads/video/I_LOVE_YOU_H264_720P_23.976_BeginWithSoftware.com.mp4" type="video/mp4">Your browser does not support the video tag.</video>

http://jsfiddle.net/4cbnj0tc/

Answer 3

Creo que una propiedad ''flex'' es la mejor para esta situación. Aquí está el código:

document.querySelector(''body'').onload = function() {
  document.querySelector(''body'').style.height = window.innerHeight + ''px'';
  window.onresize = function () {
    document.querySelector(''body'').style.height = window.innerHeight + ''px'';
  }
}

body {
  margin: 0;
  min-height: 100%;
}

.fixed-width-height {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%; height: 100%;
}

video {
  width: 100%; height: 100%
}

<div class="fixed-width-height">
  <video controls autoplay>
    <source src="myvid.mpg" type="video/mp4">
      Your browser does not support the video tag
  </video>
</div>

¿De que estas hablando? (Puede que no sea completamente HTML / CSS puro, pero creo que funciona de todos modos).

Answer 4

No estoy seguro si entendí lo que quieres. Para la etiqueta de video, solía usar object-contener y object-position para manejar la mayoría de los requisitos de diseño. Con el jsfiddle que dio, intente cambiar la clase ''child'' a:

.child{
    position: relative;
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center;
}

Esto hará que el video se llene hasta el ancho total o la altura total en función de la relación h / w. Si desea que el video llene todo el div con alguna parte desbordada, simplemente cambie el ajuste del objeto para cubrir. Espero que esto ayude.

Answer 5

Podrías usar una combinación de posicionamiento y traducciones para lograr esto:

.fixed-width-height {
  position: relative;
}
.fixed-width-height video {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

<div class="fixed-width-height">
  <video style="min-width:100%; min-height:100%;" controls autoplay>
    <source src="myvid.mpg" type="video/mp4">
      Your browser does not support the video tag
  </video>
</div>

Nota:

Esto funcionará / debería funcionar con todos los navegadores IE8> = ni Opera Mini como se muestra here En estos navegadores, el video se mostrará en la esquina superior izquierda del elemento de ancho-alto fijo (aunque seguirá siendo funcional).

Si quisiera "cubrir" todo el div, podría usar:

.fixed-width-height video{
    position:absolute;
    top:0;
    left:0;
    height:100%;
    width:100%;
}

con el fin de cubrir completamente + estirar al padre div relativamente posicionado.

Answer 6

añade este estilo al video:

position: absolute;
min-height: 50%;
min-width: 50%; 
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;  

y este estilo al contenedor div: position:relative;

http://jsfiddle.net/4k0bpek4/2/

Answer 7

HTML

<html>
<head>
 <link rel="stylesheet" href="style1.css" type="text/css" /> 
</head>
<div class="fixed-width-height">
  <video style="min-width:100%; min-height:100%;" controls autoplay>
    <source src="video.mp4" type="video/mp4">
      Browser Not Supported
  </video>
</div>
</body>
</html>

CSS

.fixed-width-height {
  position: relative;
}
.fixed-width-height video {  
    position: relative;
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center;

}