Clean • Professional
Just like images, videos must adapt to different screen sizes and devices to ensure a smooth user experience, faster loading, and a clean layout. Fixed-size videos can look broken on mobile screens, which is why responsive videos are an essential part of modern web design.
Responsive videos automatically adjust their size and aspect ratio depending on the screen—whether it’s mobile, tablet, or desktop. Instead of staying fixed, they scale fluidly so the video looks perfect everywhere.
Example: A YouTube video that looks great on a laptop but also resizes neatly to fit on a small mobile screen.
Using <video> Element
<video controls>
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
Your browser does not support the video tag.
</video>
Attributes:
| Attribute | Description |
|---|---|
controls | Shows play/pause, volume, and timeline. |
autoplay | Starts playback automatically (use cautiously). |
loop | Plays video repeatedly. |
muted | Starts video muted (required for autoplay in some browsers). |
poster | Displays an image before the video loads. |
preload | auto, metadata, none — hints how much to preload. |
Embedding Third-Party Videos
<iframe> embedding.<iframe src="<https://www.youtube.com/embed/VIDEO_ID>"
title="Sample Video"
frameborder="0"
allowfullscreen></iframe>
Videos often need a container wrapper to maintain aspect ratio and fit different devices.
Aspect Ratio with Padding Hack
<div class="video-wrapper">
<iframe src="<https://www.youtube.com/embed/VIDEO_ID>" frameborder="0" allowfullscreen></iframe>
</div>
.video-wrapper {
position: relative;
width: 100%;
padding-top: 56.25%; /* 16:9 Aspect Ratio */
}
.video-wrapper iframe,
.video-wrapper video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Using object-fit for <video> Cropping
video {
width: 100%;
height: 300px;
object-fit: cover; /* crop to fit container */
object-position: center; /* center the crop */
}
| Technique | Benefit |
|---|---|
| Use optimized formats | MP4, WebM, or AV1 for modern browsers. |
| Lazy-loading videos | Load videos only when in viewport. |
| Autoplay muted | Avoids blocking autoplay on mobile. |
| Smaller resolutions for mobile | Reduce bandwidth and load time. |
| Preload wisely | preload="metadata" to save bandwidth. |
Example:
<video controls preload="metadata" poster="thumbnail.jpg" width="100%">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
Your browser does not support the video tag.
</video>
Always provide captions/subtitles for accessibility:
<track src="captions.vtt" kind="subtitles" srclang="en" label="English">
<div class="video-wrapper">
<iframe src="https://www.youtube.com/embed/VIDEO_ID"
title="Responsive Video Example"
frameborder="0"
allowfullscreen></iframe>
</div>.video-wrapper {
position: relative;
width: 100%;
padding-top: 56.25%; /* 16:9 Aspect Ratio */
}
.video-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}