Video too large for mobile browser

user_12957129 0
Viewed 839

I have a video on one of my html pages, and I love the dimensions for it on desktop, but on mobile its way too large, and is extending the screen. I know this is fixable but I'm a bit confused in the solution I've looked a few up and am still confused.

<video width="900" height="450" autoplay loop controls >
 <source src="images/Demo.mov" type="video/mp4">
 Your browser does not support the video tag.
</video>
css html
2 Answers

video{
  max-width:900px;
  width:100%;
}
<video  height="450" autoplay loop controls >
 <source src="images/Demo.mov" type="video/mp4">
 Your browser does not support the video tag.
</video>

below CSS might help you.

video{
  max-width:900px;
  width:100%;
}
user_63157700

  1. Remove the width and height attributes inside the HTML.

    <video autoplay loop controls >
 <source src="images/Demo.mov" type="video/mp4">
 Your browser does not support the video tag.
</video>

  2. Use CSS media queries to style the video frame. Example:

    @media only screen and (max-width: 600px) {
  video {
    width: 900px;
    height: 450px;
  }
}

See the first line of the CSS code. There stands max-width: 600px. This is the maximal width of your screen. 600px are small devices.

Disclaimer: the CSS code is pseudo code. Play with the numbers to fit it into your screen and for mobile use percentage instead of pixels.

If you use width: 100%; it will be responsive to any screen size.

Using the CSS code multiple times with other screen sizes, you could support tablet or computer screens.

P.S.: Use mp4 files instead of mov files. It's more widely supported by the browsers.

user_45510410
Related