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. 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: