Resizing <video> element to parent div
css, html, video
Solution
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%;
}
Problem
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.