HTML5 Banner Video sizing for fullscreen

Question

I have a question in regards to the following:

I am tasked to create an HTML5 banner that includes video. The video container is sized to be 300x250 with controls enabled. The source assigned to it is also sized at 300x250, however when the user on a desktop views the video fullscreen on a desktop the quality turns out to be rather lousy obviously since it stretches to the users screen.

Question: Is it possible to have the video container stay at 300x250px while the source file assigned is a much larger dimension so it would be crisp when viewed on desktop devices? Is there a way to serve a smaller video when viewed on mobile devices with a detection method?

Thanks!

Answer 1

It is possible that the container dimensions ( width and height attributes ) and the video dimensions ( videoWidth and videoHeight attributes ) don't match.

You can apply the media queries to source element using media attribute:

<video width="300" height="250" controls>
  <source src="small.mp4" type="video/mp4" media="screen and (max-width: 480px)">
  <source src="big.mp4" type="video/mp4">
</video>