Responsive Web Design – Videos

Using The width Property

When the width property is set to 100%, the video player becomes responsive, adjusting its size to fit different screen dimensions.

Example

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

In the example above, it’s worth noting that the video player can expand beyond its original size. A more optimal approach in many scenarios is to utilize the max-width property instead.

Using The max-width Property

When the max-width property is set to 100%, the video player will resize proportionally to fit smaller screens, ensuring it never exceeds its original size.

Example

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

Add a Video to the Example Web Page

Setting the max-width property to 100% allows the video player to adjust its size proportionally for smaller screens, ensuring it remains within its original dimensions.

Example

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