html - ejemplos - Video 100% ancho y alto.
iframes (9)
Al verificar otras respuestas, usé el ajuste de objetos en CSS:
video {
object-fit: fill;
}
De MDN ( https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit ):
La propiedad CSS de ajuste de objeto especifica cómo deben ajustarse los contenidos de un elemento reemplazado a la caja establecida por su altura y anchura utilizadas.
Valor: llenar
El contenido reemplazado se dimensiona para llenar el cuadro de contenido del elemento: el tamaño del objeto concreto del objeto es el ancho y la altura utilizados del elemento.
Tengo un video y quiero que SE LLENE el 100% del ancho y el 100% de la altura. Y mantener la relación de aspecto.
¿Es posible que al menos llene el 100% de ambos? Y si un poco del video tiene que estar fuera de la pantalla para mantener la relación de aspecto, eso no importa.
HTML:
<video preload="auto" class="videot" id="videot" height="100%" preload>
<source src="BESTANDEN/video/tible.mp4" type="video/mp4" >
<object data="BESTANDEN/video/tible.mp4" height="1080">
<param name="wmode" value="transparent">
<param name="autoplay" value="false" >
<param name="loop" value="false" >
</object>
CSS:
.videof, .videot {
width: 100% !important;
height: 100% !important;
}
Esta es una excelente manera de hacer que el video se ajuste a un banner, es posible que necesite modificarlo un poco para la pantalla completa, pero debería estar bien. 100% CSS.
position: absolute;
top: 50%;
left: 50%;
z-index: 1;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
transform: translate(-50%, -50%);
Esto me funciona para video en un contenedor div.
.videoContainer
{
position:absolute;
height:100%;
width:100%;
overflow: hidden;
}
.videoContainer video
{
min-width: 100%;
min-height: 100%;
}
Referencia: http://www.codesynthesis.co.uk/tutorials/html-5-full-screen-and-responsive-videos
Más fácil y sensible.
<body>
<video src="full.mp4" autoplay muted loop></video>
</body>
video {
height: 100vh;
width: 100%;
object-fit: fill;
position: absolute;
}
Puede usar Javascript para establecer dinámicamente la altura en el 100% de la ventana y luego centrarla con un margen izquierdo negativo basado en la relación del ancho del video al ancho de la ventana.
var $video = $(''video''),
$window = $(window);
$(window).resize(function(){
var height = $window.height();
$video.css(''height'', height);
var videoWidth = $video.width(),
windowWidth = $window.width(),
marginLeftAdjust = (windowWidth - videoWidth) / 2;
$video.css({
''height'': height,
''marginLeft'' : marginLeftAdjust
});
}).resize();
Si está buscando el equivalente a background-size: cover para video .
video {
object-fit: cover;
}
Esto llenará el contenedor sin distorsionar el video.
PD: Estoy extendiendo la respuesta de Leo Yu aquí.
Soy nuevo en todo esto. Tal vez solo puedas agregar / cambiar este código HTML. Sin necesidad de CSS. Funciono para mi :)
width="100%" height="height"
Yo uso JavaScript y CSS para lograr esto. La función JS se debe llamar una vez en init y en el cambio de tamaño de la ventana. Sólo probado en Chrome.
HTML:
<video width="1920" height="1080" controls>
<source src="./assets/video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
JavaScript:
function scaleVideo() {
var vid = document.getElementsByTagName(''video'')[0];
var w = window.innerWidth;
var h = window.innerHeight;
if (w/16 >= h/9) {
vid.setAttribute(''width'', w);
vid.setAttribute(''height'', ''auto'');
} else {
vid.setAttribute(''width'', ''auto'');
vid.setAttribute(''height'', h);
}
}
CSS:
video {
position:absolute;
left:50%;
top:50%;
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}
video {
width: 100% !important;
height: auto !important;
}
Eche un vistazo aquí http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php