Responsive Web Design – Videos
Using The width Property
The video player will scale up and down and be responsive if the width property is set to 100%:
Example
video {
width: 100%;
height: auto;
}
It is possible to enlarge the video player in the example above beyond its initial dimensions. In many circumstances, using the max-width attribute will be a superior option.
Using The max-width Property
When the max-width attribute is set to 100%, the video player will resize to fit its original dimensions if necessary, but it will never expand to fill the screen:
Example
video {
max-width: 100%;
height: auto;
}
Add a Video to the Example Web Page
We would like to include a video on our sample website. The video will automatically resize to fill the entire available space:
Example
video {
width: 100%;
height: auto;
}
