CODEWITHSUNDEEP
javascripthtmlcsshtml5-video
Sachin B. R.
Sachin B. R.

Reputation: 959

How to fit a mp4 video to a certain height and width in IE?

I have a code snippet as follows

video {
  object-fit:fill;
  }
<!DOCTYPE html>
<html>
<body>

<video width="800" height="240" controls>
  <source src="http://www.w3schools.com/tags/movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>
 
</body>
</html>

I am trying to fit the video to a certain width and height but the video is not getting stretched to fit the width in IE (You can see a black portion in either sides of the video).

Does any one have a solution for this issue?

Upvotes: 2

Views: 627

Answers (1)

Max
Max

Reputation: 51

If you are ok with not supporting IE below version 9 you can try using css transforms:

Firstly, wrap your video in a tag of a desired width and height:

<div id="videoWrapper" style="width: 800px; height: 240px;">
     <video id="videoFill">
         <source src="http://www.w3schools.com/tags/movie.mp4" type="video/mp4">
         Your browser does not support the video tag.
     </video>
</div>

Now, you can use JS to rescale video accordingly (after checking client browser type and version):

var wrap = document.getElementById("videoWrapper");
var vid = document.getElementById("videoFill");

var newScaleX = parseInt(wrap.style.width)/vid.offsetWidth;
var newScaleY = parseInt(wrap.style.height)/vid.offsetHeight;
var scaleString = "scale(" + newScaleX + ", " + newScaleY + ")";

vid.style.msTransformOrigin = "left top";
vid.style.msTransform = scaleString;

Note that I deleted controls from video tag. It's very propable that after rescaling video navigation will look 'funny' so you may want to include some sort of JS/jQuery custom controls plugin or write one yourself.

Working fiddle (IE > 8 only): https://jsfiddle.net/4ec1wxn8/

Upvotes: 1

Related Questions