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: