css - Resizing <video> element to parent div

Question

Has anyone been able to successfully resize a video element to a parent div?

My video element contains a webcam stream that comes in with a ratio of 4:3. I'd like to break the ratio and adjust it to the div size. I've tried the following:

• Set width and height 100% > this doesn't do anything, 4:3 remains
• Set min-height and min-width 100% > this makes the video resize to something really huge that overflows the div
• position:absolute, bottom, top, left and right: 0px also a huge flow over the parent div
• Using javascript to get the parent divs height and width, then setting it for the video: No effect, 4:3 ratio remains, no size change.

How to do it?

EDIT: Thanks Gaurav for that greatly detailed reply. It looks good, I wish it would work for me though.

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

My video element is in there, I gave it your CSS solution. Unfortunately it only turned white. Could my parentDiv css have anything to do with that?

EDIT 2: Here's the HTML:

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

This is mainly it . The src-attribute of the video is set to my webcam stream.

EDIT 3:

If I right-click and inspect the white (now red scribbled) part in this screenshot https://s22.postimg.cc/th4ha8nmp/ratio2.png, Chrome shows me that the white also belongs to the stream.

It seems as if the stream of the webcam comes along with white stripes at the top and bottom. This is.. annoying.

question from:https://stackoverflow.com/questions/23248441/resizing-video-element-to-parent-div

Answer 1

1) CSS only

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

from this answer - simulate background-size:cover on <video> or <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) using iframe css only

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