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í.