? Responsive Videos in CSS (RWD Videos)

Making videos responsive ensures they scale smoothly across different devices and screen sizes without distortion or overflow.

? Basic CSS for Responsive Videos

.video-container {  position: relative;  width: 100%;  padding-bottom: 56.25%; /* 16:9 aspect ratio (9/16 = 0.5625) */  height: 0;  overflow: hidden;}.video-container iframe,.video-container video {  position: absolute;  top: 0;  left: 0;  width: 100%;  height: 100%;  border: 0;}

HTML:

<div class="video-container">  <iframe src="https://www.youtube.com/embed/VIDEO_ID" allowfullscreen></iframe></div>

? How it works

• The .video-container uses padding-bottom to create an aspect ratio box.

• The embedded video (iframe or <video>) is positioned absolutely inside the container.

• The video fills the container fully and scales with its width.

? For Different Aspect Ratios

• 4:3 aspect ratio ? padding-bottom: 75%;

• 21:9 aspect ratio ? padding-bottom: 42.85%;

? Bonus: Make videos scale within grid or flex layouts

.responsive-video {  max-width: 100%;  height: auto;  display: block;}

Summary

• Wrap your video in a container that controls aspect ratio with padding.

• Make video fill container with absolute positioning.

• The container scales fluidly with screen size.

Want me to generate a live demo or an example with multiple responsive videos?