Resizing <Video> Element to Parent Div

Resizing video element to parent div

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

Resizable video does not fully fit to parent div

By default, the video tag tries to keep the video aspect ratio.
If you want to fill your parent, you must use the CSS property "object-fit"

In your code, try to add

video_element.style.objectFit = "fill";

or, using JQuery:

$(video_element).css("object-fit", "fill");

Of course, doing this will not guarantee a perfect aspect ratio for the video.

More info about the object-fit property here https://developer.mozilla.org/it/docs/Web/CSS/object-fit

Resize HTML video to fit into parent container height *and* width

I'm not sure if this is what you want, but try it:

.main {
  /*overflow: hidden;*/
  
  /* TRY ASPECT RATIOS HERE 
  800w x 300h doesn't work -- bottom gets cut off */
  width: 800px;
  height: 300px;
  background: red;
}
.video-wrapper {
  display: flex;
  height: 100%;
}
.video {
  width: 100%;
  height: auto; /* spec says no percent allowed here */
}

How to resize two video elements with respect to the parent DIV size using javascript / Jquery?

According to your code here's a working demo.

let defaultWidth = 800;
let defaultHeight = 400;
let container = document.getElementById('container');
let firstVideo = document.querySelector('#firstvideo');
container.style.width = firstVideo.style.width = defaultWidth+'px';
container.style.height = firstVideo.style.height = defaultHeight+'px';

function add_video(){
        //add second video
        var videoelement = document.createElement("video");
        videoelement.setAttribute("id", "second_video");
        videoelement.setAttribute("controls", "controls");
        var sourceMP4 = document.createElement("source"); 
        sourceMP4.type = "video/mp4";
        sourceMP4.src = "http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4";
        videoelement.appendChild(sourceMP4);
        container.appendChild(videoelement);
        videos = document.querySelectorAll('video').forEach(function(v){
        v.style.width = (parseInt(container.style.width)/2)-5+'px';
        v.style.height = parseInt(container.style.height)+'px';
        });

    }

    function delete_video(){
        //delete the second video if exist
        var myEle = document.getElementById("second_video");
        if(myEle){
                myEle.remove();
        }
        container.style.width = firstVideo.style.width = defaultWidth+'px';
    }

#container{
    width: 800px;
    height: 400px;
    border: 1px solid red;
}
#container video{
display:inline-block;}

<!DOCTYPE html>
 <html>
     <head>
        <meta charset="utf-8"/>
        <title>App</title>
        <meta name="viewport" content="width=device-width,initial-scale=1" />
        <link href="styles.css" rel="stylesheet" />
     </head>
 <body>    
 <div id="container"> <!-- parent DIV-->
        <video id="firstvideo" controls="controls">
            <source type="video/mp4" src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"/>
        </video>
</div>       

<div id="buttons">
    <button id="add_video" onclick="add_video()">Add</button>
    <button id="delete_video" onclick="delete_video()">delete</button>
</div>
</body>
</html>

Resize child video element according to parent div in plain javascript

Well, after trying numerous ways I have discovered that no method can resize the video element if it has already started playing media. It throws "Uncaught SyntaxError: Unexpected token ILLEGAL" error on trying to set width or height. So, I have decided to use canvas and setting the video element as the source to the drawImage method of the canvas context serves my purpose. Now my markup is as follows:

<div id="myDiv" class="drsElement drsMoveHandle"
     style="left: 20px; top: 20px; 
     background: #348534; text-align: center">
    <canvas id="localVideoCanvas" ></canvas>
</div>

and the CSS:

.drsElement {
 position: absolute;
 border:8px solid #a00000;
}

.drsMoveHandle {
 height: 20px;
 background-color: #CCC;
 border-bottom: 1px solid #666;
 cursor: move;
}

#localVideoCanvas {
    width: 100%;
    height: 100%;
}

Video tag does not take parent div width and height

You need set height of the container .header

.header {
  height: 120px;
}

.header-video {
  width: 100%;
  height: 100%;
}

.header
{
  resize: both;
  overflow: hidden;
  border: 1px solid red;
  z-index: 1;
}

<div>text above</div>
<div class="header">
   <video
      src="https://samplelib.com/lib/preview/mp4/sample-30s.mp4"
      class="header-video"
      autoplay
      muted
      loop
      >
      Your browser does not support HTML5 video.
   </video>
</div>
<div>resize me</div>

How to resize child div and images in it when parent div resizes

You can use percentage width: 100%

.video-container {
  position: relative;
  width: 90vw
}

.link-container {
  position:absolute;
  top:70%;
  left:10%;
}

.imglink {
  width: 10vw; /*i also tried auto here*/
  height: 10vw; /*i also tried auto here*/
  content: url('data:image/png;base64,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');
}

<div class="video-container">
    <div class="myvideo">

      <video width="100%" >
        <source src="https://www.w3schools.com/tags/movie.mp4" type="video/mp4"> 
        Your browser does not support the video tag.
      </video>
    </div>
    <div class="link-container">
        <a href="https://www.link.com/">
            <img class="imglink" />
        </a>
    </div>
</div>

How to make video fit into div?

A video needs to respect it's proportion, right? I don't think you can't change the width and height like you want... you can change the width and height of the "video" tag, but the video displaying will mantain it's proportion... so the solutions are actually 2:

First: change width and height of the div that contains the video, and make the same proportion of the video:

Second: Make the div overflow: hidden and increase the width of the "video" tag until the height of the video itself reaches the div container (like in this fiddle)

https://jsfiddle.net/mjkvupmt/75/

#banner{
  position:fixed;
  margin:0;
  width:300px;
  height:250px;
  border: 1px solid red;
  overflow: hidden;
}

#banner video{
  position: absolute;
  width: 450px !important;
  height: auto !important;
  background: url('//demosthenes.info/assets/images/polina.jpg') no-repeat;
  background-size: cover;
  transition: 1s opacity;
  z-index:-1;
}  

Once you made that, you can position the video as you want

How to style and structure internal div to maintain parent div size on mobile without using px for dimensions

Rather than having a second div, the .content, you can use css-flex to get the content to be in the middle. Please try the below code.

.video-box {  position: relative;}
video {  max-width: 100%;}
.overlay {  width: 100%;  height: 100%;  display: flex;  align-items: center;  flex-direction: column;  justify-content: center;  position: absolute;  top: 0px;  right: 0px;  background: rgba(0, 0, 0, 0.2);}

<div class="video-box">  <video><source src="https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4"></video>
  <div class="overlay">    <h3>video is over</h3>    <p>what to do next</p>  </div>
  <div class="overlay">    <h3>Video is over</h3>  </div></div>

---

Related Topics