CODEWITHSUNDEEP
htmlcss
NoahSmiley
NoahSmiley

Reputation: 89

Video too large for mobile browser

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>

Upvotes: 3

Views: 2672

Answers (2)

Prakash Rajotiya
Prakash Rajotiya

Reputation: 1033

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

Upvotes: 2

H. Pauwelyn
H. Pauwelyn

Reputation: 14320

  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.

Upvotes: 0

Related Questions