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;
}