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.