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:
Example
video {
width: 100%; height: auto;
}
Try it Yourself »
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:
Example
video {
max-width: 100%; height: auto;
}
Try it Yourself »
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:
Example
video {
width: 100%; height: auto;
}
Try it Yourself »
★
+1
Reference: https://www.w3schools.com/css/css_rwd_videos.asp