CSS Responsive Web Design – Videos

By | October 3, 2021
CSS Responsive Web Design – Videos

In this Responsive Web Design, we will look at some tricks on how can we create a responsive styling for the HTML5 video elements.

In HTML5 the World Wide Web Consortium (W3C) introduced a dedicated <video> element to embed videos on the web-page.

Vamware

In Responsive web-designing, we need to style the <video> element in such a way it looks good on every device.

Setting the Width of <video> Element

In Responsive web-designing, you should always prefer the relative values to specifies the length related values. Use the % unit to set the width of the video player, so when the browser displays size increases or decreases the video player also scale up and down.

Example

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>
        video {
          width: 100%;
          height: 400px;
      }
    </style>
</head>
<body>
 <video width="400" controls>
  <source src="video1.mp4" type="video/mp4">
  Your browser does not support HTML5 video.
</video>
</body>
</html>

Setting max-width Property

By setting the width:100%, the <video> will be scaled more than its original size if the browser window display size increases. So, it’s always a good practice to specify max-width:100% instead of width.

By specifying the max-width the element only scale up to its original size.

Example

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>
        video {
          max-width: 100%;
          height: 400px;
      }
    </style>
</head>
<body>
 <video width="400" controls>
  <source src="video1.mp4" type="video/mp4">
  Your browser does not support HTML5 video.
</video>
</body>
</html>

Summary

  • In HTML5 we have <video> element to embed a video in our web-page.
  • All the browsers do not support the <video> element.
  • Use the Relative value to set the height and width of the element.
  • Use max-width instead of width when you want to scale up your video section only to its original size.’

People are also reading:

Leave a Reply

Your email address will not be published. Required fields are marked *