css - ejemplos - Cambiar el tamaño del elemento<video> a div padre

texto ajustable css

Question

¿Alguien ha podido redimensionar exitosamente un elemento de video a un div padre?

Mi elemento de video contiene un flujo de cámara web que viene con una ratio of 4:3 . Me gustaría romper la relación y ajustarlo al tamaño de div. He intentado lo siguiente:

• Ajuste el width and height 100% > esto no hace nada, queda 4: 3
• Establecer min-height and min-width 100% > esto hace que el video cambie de tamaño a algo realmente enorme que desborda el div
• position:absolute, bottom, top, left and right: 0px también un gran flujo sobre el div padre
• Usando javascript para obtener la altura y el ancho de los divs primarios, luego configúrelo para el video: Sin efecto, la proporción 4: 3 permanece, sin cambio de tamaño.

¿Cómo hacerlo?

EDIT : Gracias Gaurav por esa respuesta muy detallada. Se ve bien, me gustaría que funcionara para mí sin embargo.

.parentDiv // Results in around 400x400 pixels for me
{
position: absolute;
top: 11px;
right: 10px;
left: 10px;
height: -webkit-calc(50% - 18px);
height: calc(50% - 18px);
display: block;
} 

Mi elemento de video está ahí, le di tu solución CSS. Desafortunadamente solo se volvió blanco. ¿Podría mi parentDiv css tener algo que ver con eso?

EDIT 2 : Aquí está el HTML:

<div class="parentDiv">
<video class="cam_video" autoplay></video>
</div>

Esto es principalmente eso. El atributo src del video se establece en la transmisión de mi cámara web.

EDITAR 3 :

Si hago clic con el botón derecho e inspecciono la parte blanca (ahora escrita en rojo) en esta captura de pantalla https://s22.postimg.cc/th4ha8nmp/ratio2.png , Chrome me muestra que el blanco también pertenece al flujo.

Parece como si el flujo de la cámara web viene con rayas blancas en la parte superior e inferior. Esto es ... molesto.

Answer 1

Puedes usar la propiedad de ajuste de objeto para resolver esto. HTML:

<div class="parentDiv">
<video class="cam_video" autoplay></video>
</div>

CSS:

.cam_video {
object-fit: fill;
}

Esto haría que el video se extienda para ocupar todo el div padre.

Answer 2

1) solo CSS

Demo

HTML

<div class="wrapper">
<video class="videoInsert">
<source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</div>

css

.videoInsert {
position: absolute;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
background-size: cover;
overflow: hidden;
}

2) jQuery

Demo

HTML

<div id="video-viewport">
<video autoplay preload width="640" height="360">
<source src="https://s3.amazonaws.com/whiteboard.is/videos/bg-loop-new.mp4" />
</video>
</div>

css

#video-viewport {
position: absolute;
top: 0;
left:0;
overflow: hidden;
z-index: -1; /* for accessing the video by click */
}
body{
margin:0;
}

jquery

de esta respuesta - simule el tamaño de fondo: cubierta en <video> o <img>

var min_w = 300; // minimum video width allowed
var vid_w_orig; // original video dimensions
var vid_h_orig;
jQuery(function() { // runs after DOM has loaded
vid_w_orig = parseInt(jQuery(''video'').attr(''width''));
vid_h_orig = parseInt(jQuery(''video'').attr(''height''));
$(''#debug'').append("<p>DOM loaded</p>");
jQuery(window).resize(function () { resizeToCover(); });
jQuery(window).trigger(''resize'');
});
function resizeToCover() {
// set the video viewport to the window size
jQuery(''#video-viewport'').width(jQuery(window).width());
jQuery(''#video-viewport'').height(jQuery(window).height());
// use largest scale factor of horizontal/vertical
var scale_h = jQuery(window).width() / vid_w_orig;
var scale_v = jQuery(window).height() / vid_h_orig;
var scale = scale_h > scale_v ? scale_h : scale_v;
// don''t allow scaled width < minimum video width
if (scale * vid_w_orig < min_w) {scale = min_w / vid_w_orig;};
// now scale the video
jQuery(''video'').width(scale * vid_w_orig);
jQuery(''video'').height(scale * vid_h_orig);
// and center it by scrolling the video viewport
jQuery(''#video-viewport'').scrollLeft((jQuery(''video'').width() - jQuery(window).width()) / 2);
jQuery(''#video-viewport'').scrollTop((jQuery(''video'').height() - jQuery(window).height()) / 2);
};

3) usando solo iframe css

Demo

HTML

<div class="wrapper">
<div class="h_iframe">
<iframe src="//www.youtube.com/embed/9KunP3sZyI0" frameborder="0" allowfullscreen></iframe>
</div>
</div>

css

.h_iframe iframe {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}

Answer 3

Este formato me ayudó a obtener el ancho que quiero para videos BG de alta resolución. Incluso resolver los problemas de relación. Gracias

<div > <center><video style="position: relative;width: 900px; height: 700px; object-fit: cover;" class="bg-wrap" autoplay muted loop id="myVideo" src="videos/Raindrops.mp4" type="video/MP4"></video></center> </div>

 ` <div style="position: absolute; top:200px; width:100%; height:auto; padding:50px 20px;background-color: rgba(128, 128, 128, 0.486);" class="content centered" style="object-fit: cover;">
<center>
<h1 style="font-size:700%;color:yellow;font-family: sans-serif;width:device-width">NIET</h1>
<p>My belove college</p>
</center>
</div>`

Answer 4

 object-fit: cover;

Eso hizo el truco para mí.