Skip to main content

Responsive Web Design - Videos

Using The width Property​

If the width property is set to 100%, the video player will be responsive and scale up and down:

video {  
	width:  100%;  
	height:  auto;  
}

Notice that in the example above, the video player can be scaled up to be larger than its original size. A better solution, in many cases, will be to use the max-width property instead.

Using The max-width Property​

If the max-width property is set to 100%, the video player will scale down if it has to, but never scale up to be larger than its original size:

video {  
	max-width:  100%;  
	height:  auto;  
}

Add a Video to the Example Web Page​

We want to add a video in our example web page. The video will be resized to always take up all the available space:

video {  
	width:  100%;  
	height:  auto;  
}

Table of Contents