RWD Videos

CSS Tutorial

CSS Advanced

CSS Responsive

CSS Grid

Responsive Web Design – Videos

Using The width Property

When the width property is adjusted to 100%, the video player becomes responsive and scale up and down:

HTML
				
					<video width="400" controls>
  <source src="mov_bbb.mp4" type="video/mp4">
  <source src="mov_bbb.ogg" type="video/ogg">
  Your browser does not support HTML5 video.
</video>
<p>Resize the browser window to see how the size of the video player will scale.</p>
</body>

CSS

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

Output

Resize the browser window to see how the size of the video player will scale.

Using The max-width Property

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

HTML
				
					
<video width="400" controls>
  <source src="mov_bbb.mp4" type="video/mp4">
  <source src="mov_bbb.ogg" type="video/ogg">
  Your browser does not support HTML5 video.
</video>
<p>Resize the browser window to see how the size of the video player will scale when the width is less than 400px.</p>
CSS
				
					video {
  max-width: 100%;
  height: auto;
}

Output

Resize the browser window to see how the size of the video player will scale when the width is less than 400px.