What is the best way to adjust the height and width of an mp4 video in Internet Explorer?

I came across a code snippet that looks like this

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 facing an issue where I am trying to adjust the video to a specific width and height, but it doesn't stretch to fit the width in IE. Instead, there are black portions on either side of the video.

If anyone has a solution for this problem, I would greatly appreciate your help.

Answer №1

If you're comfortable with not providing support for IE versions less than 9, you can experiment with using CSS transforms:

Start by enclosing your video in a container with a specified 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>

Next, you can use JavaScript to resize the video accordingly (after verifying the client's 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;

Keep in mind that I removed the controls attribute from the video tag. It's likely that after resizing the video, the navigation may appear awkward, so you might want to consider including a custom controls plugin using JS/jQuery or creating one yourself.

Here's a demo showcasing the solution (works only on IE 8 and above): https://jsfiddle.net/4ec1wxn8/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Modifying HTML Email to Achieve Consistent Rendering Across Various Email Platforms

While creating an HTML based email for our subscribers, I noticed that it renders differently in various email clients. The main issue arises in Outlook 2003 where the main picture is offset to the left and the grid boxes vary in height depending on the co ...

VueJS File Upload Field Failing to Reset Post Successful Submission

I am facing an issue in my VueJS application where the form does not clear all field values after submission, especially the file upload field. After a successful submission, the uploaded file name still remains displayed on the screen. Below is the code ...

A step-by-step guide to creating adorable rounded corners in a DIV element

I'd like to create a stylish rounded corner div on the top-right and top-left edges. I attempted it with the following code: border-top-left-radius: 5em; border-top-right-radius: 5em; Desired look of the div: https://i.stack.imgur.com/EoSvSm.jpg A ...

The AngularJS ng-if directive functions on a variable will only function on the

I'm currently working on updating an old codebase that was written in AngularJS, a framework I am not very familiar with. My task is to implement a spinner that appears when an HTTP request is sent and disappears once the response is received. The sp ...

The height of a DIV element can vary based on

Looking at this div structure: DIV3 has a fixed height. The nested DIV5 will be receiving content from Ajax, causing its height to change. Additionally, there are some DHTML elements inside it that also affect the height. DIV5 has a fixed min-height set. ...

Any suggestions on how to secure my socket connection following user authentication in redux?

After onSubmit, userAction.login is called which then dispatches "SUCCESS_AUTHENTICATE" to set the token of the user and socket state in their respective reducers. How can I proceed to trigger socket.emit("authenticate", {token})? ...

Is there a way to use Puppeteer to take screenshots of a list of URLs?

Within an async function, I have set up a loop to iterate over a list of URLs. The data is sourced from an .xls file that has been converted to .json. My objective is to take a screenshot of each URL in the array, but I keep encountering an UnhandledPromis ...

Resolving the issue of encountering 'Failed to load resource: the server responded with a status of 500' in React and express

Attempting to upload an image to a local folder using multer and React resulted in an Internal Server Error. The chrome debugger indicated that the server responded with a status of 500. It seems like the data format being sent to the server side is incorr ...

Why do they call me the Commander of Errors?

Alert: PowerShell has detected that a screen reader may be in use and has disabled PSReadLine for compatibility reasons. To re-enable it, simply run 'Import-Module PSReadLine'. PS C:\Web Development> scss --style expanded "c:\W ...

Executing function inside an Angular factory

I am currently working with an Angular factory that contains various functions. My goal is to use myService to retrieve data, and upon successful retrieval, call another function within the factory: myApp.factory('myFactory', function($http) { ...

Are connections established between different pages using sockets?

After navigating from Page A to a link that opens Page B as a popup within the same domain, various operations are performed in the popup window. Once these operations are completed, there is a need to update certain div elements on Page A. What are the ...

What is the process of assigning a string from an external PHP file to a JavaScript variable?

Recently, I've been experimenting with reading data from an external PHP file using Ajax. My goal is to store this data in a Javascript variable, but I'm unsure if my current approach is correct. Should I define the variable within the Ajax brack ...

Levitating with Cascading Style Sheets

Looking for some assistance to troubleshoot my code. I am trying to make the hover color apply only to the navigation bar and not affect the pictures. I attempted to solve this by specifying .a.main-nav:hover { ...}, but it ended up removing the hover effe ...

Numerous divs positioned above a myriad of images

Is there a way to create multiple images with a tag name overlaying each one as a link? I've been able to add a tag name on top of one image, but not on others. Every time I try to duplicate the div containing the image and tag, the tags do not show u ...

Experiencing a missing handlebars helper error when utilizing a helper within partials in express-handlebars

I have set up custom helpers using express-handlebars like this: const { create } = require("express-handlebars"); // Configuring the handlebars engine const hbs = create({ helpers: require("./config/handlebars-helpers"), }); app.engi ...

The Vue application is unable to expand to 100% height when using a media query

Hello everyone, I'm currently using my Vue router for multiple pages, and I'm facing an issue where setting the height of the main container to 100% within this media query is not working as expected: @media screen and (min-width: 700px) { #sig ...

CSS: Creating a block that stretches the entire width of its parent block

I've been facing the same issue multiple times. Whenever I use the float property to display one block, the next block ends up overlapping with the first one. For example: Consider the following block of code: .row_item{ width: 30%; display: block; ...

Tips on eliminating the header section in SlickGrid?

Is there a way to remove the header row in SlickGrid using CSS? I know there isn't an API for it, but maybe some CSS tricks can do the job. Any suggestions? Check out this example: Calling all CSS experts! I'm looking for assistance in modifyin ...

How to turn off and on all elements within a Div tag

Is there a way to disable all elements within a Div tag? I've managed to disable input types successfully, but I'm struggling with links. I attempted the solution provided here, but it didn't work. Here's the code snippet that worked f ...

Generating images using Node.js and GraphicsMagick

I'm looking for a way to generate an image using graphicsMagick and node.js. Typically, I can achieve this with the following command: gm convert -background transparent -pointsize 30 -gravity Center label:türkçee HEEEEEY.png But I need to replic ...