escala el video HTML5 y la relación de aspecto de corte para llenar todo el sitio

Quiero utilizar un video 4: 3 como fondo en un sitio, pero no es posible establecer el ancho y alto al 100%, ya que la relación de aspecto se mantiene intacta, por lo que el video no llena todo el ancho del sitio.

¡gracias por tu ayuda!

aquí está mi código html y css

html:

    html 5 video test    

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

css:

 body { background-color:#000000; } #vidtest { position: fixed; top: 0px; left: 0px; right: 0px; bottom: 0px; width: 200%; height: 100%; z-index: -1000; } .cv { width: 800px; position:relative; text-align:center; margin-top: 100px; color:#FFFFFF; font-family:"Arial"; font-size: 10px; line-height: 2em; text-shadow: 3px 3px 2px #383838; margin-left: auto; margin-right: auto; } 

este es un hilo muy viejo, lo sé, y lo que estoy proponiendo no es necesariamente la solución que está buscando, sino para todas las personas que aterrizan aquí debido a la búsqueda de lo que busqué: escalar el video para llenar el elemento contenedor del video, manteniendo ratio intacto

Si desea que el video llene el tamaño del elemento pero el video se escala correctamente para llenar el contenedor manteniendo intacta la relación de aspecto, puede hacerlo con CSS usando object-fit . Al igual que background-size de fondo para las imágenes de fondo, puede usar lo siguiente:

 video { width: 230px; height: 300px; object-fit: cover; } 

Espero que esto pueda ser de ayuda para algunas personas.

EDITAR: funciona en la mayoría de los navegadores pero IE

http://dev.opera.com/articles/view/everything-you-need-to-know-about-html5-video-and-audio/

[…] del mismo modo que el elemento img: si solo configura uno de ancho y alto, la otra dimensión se ajusta automáticamente de manera que el video conserve su relación de aspecto. Sin embargo, a diferencia del elemento img, si configuras el ancho y el alto como algo que no coincide con la relación de aspecto del video, el video no se estira para llenar el cuadro. En cambio, el video conserva la proporción de aspecto correcta y se muestra en forma de buzón dentro del elemento de video. El video se renderizará lo más grande posible dentro del elemento de video mientras se mantiene la relación de aspecto.

Trabajo alrededor de esto en javascript comparando la proporción establecida en el elemento con el video fuente y luego aplicando una transformación CSS: https://gist.github.com/1219207

Recogió esto ayer y ha estado luchando por una respuesta. Esto es algo similar a la sugerencia de Jim Jeffers, pero funciona para la escala xey, está en la syntax de JavaScript y solo se basa en jQuery. Parece que funciona bastante bien:

 function scaleToFill(videoTag) { var $video = $(videoTag), videoRatio = videoTag.videoWidth / videoTag.videoHeight, tagRatio = $video.width() / $video.height(); if (videoRatio < tagRatio) { $video.css('-webkit-transform','scaleX(' + tagRatio / videoRatio + ')') } else if (tagRatio < videoRatio) { $video.css('-webkit-transform','scaleY(' + videoRatio / tagRatio + ')') } } 

Te encontrarás con algunos problemas si estás usando los controles nativos como puedes ver en este violín: http://jsfiddle.net/MxxAv/

Tengo algunos requisitos inusuales debido a todas las capas de abstracción en mi proyecto actual. Por eso, estoy usando un divisor envoltorio en el ejemplo y escalando el video al 100% dentro del envoltorio para evitar problemas en algunos de los casos de esquina que he encontrado.

Lo que funcionó para mí es

 video { object-fit: fill; } 

Lo uso para llenar el ancho O la altura … (requiere jQuery) Esto MANTIENE la relación de aspecto y llena el div. Sé que la pregunta era romper la relación de aspecto, pero no es necesario.

 var fillVideo = function(vid){ var video = $(vid); var actualRatio = vid.videoWidth/vid.videoHeight; var targetRatio = video.width()/video.height(); var adjustmentRatio = targetRatio/actualRatio; var scale = actualRatio < targetRatio ? targetRatio / actualRatio : actualRatio / targetRatio; video.css('-webkit-transform','scale(' + scale + ')'); }; 

siempre y cuando el tenga el ancho y el alto establecidos en 100% y su contenedor div tenga css overflow:hidden solo páselo por la etiqueta de video.

 var vid = document.getElementsByTagName("video")[0]; fillVideo(vid); 

La opción de CSS correcta para esto es object-fit: contain;

El siguiente ejemplo extenderá una imagen de fondo en el ancho de la pantalla (mientras ROMPA la relación de aspecto) y mantendrá una altura fija constante.

 body { background-image:url(/path/to/background.png) background-repeat: no-repeat; background-position: top center; background-size: 100% 346px; object-fit: contain; } 

Para un video en el contexto del OP sería:

 video#vidtest { width: 100%; height: 100%; object-fit: contain; } 

Después de algunas dificultades, esto es con lo que terminé. Escalará automáticamente el video en el momento correcto.

 var videoTag = $('video').get(0); videoTag.addEventListener("loadedmetadata", function(event) { videoRatio = videoTag.videoWidth / videoTag.videoHeight; targetRatio = $(videoTag).width() / $(videoTag).height(); if (videoRatio < targetRatio) { $(videoTag).css("transform", "scaleX(" + (targetRatio / videoRatio) + ")"); } else if (targetRatio < videoRatio) { $(videoTag).css("transform", "scaleY(" + (videoRatio / targetRatio) + ")"); } else { $(videoTag).css("transform", ""); } }); 

Simplemente ponga ese código en un bloque $(document).ready() .

Probado en Chrome 53, Firefox 49, Safari 9, IE 11 (IE escala el video correctamente, pero podría hacer otras cosas divertidas a su alrededor).