Prev Next

RWD Videos

Responsive videos adjust their size dynamically to fit their containers, ensuring they look good on all devices. Techniques like the CSS aspect ratio box, object-fit, and responsive frameworks like Bootstrap make embedding responsive videos straightforward.

Key Topics

CSS Aspect Ratio Box

To maintain a video’s aspect ratio, you can use a wrapper div with a specific height and width ratio set through padding. Here’s an example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Aspect Ratio Video</title>
    <style>
        .video-container {
            position: relative;
            width: 100%;
            padding-top: 56.25%; /* 16:9 Aspect Ratio */
        }
        .video-container iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <div class="video-container">
        <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen></iframe>
    </div>
</body>
</html>

Explanation: The padding creates an aspect ratio box that ensures the video scales proportionally, maintaining its 16:9 aspect ratio.

Using object-fit

The object-fit property allows videos to fill their container while preserving their aspect ratio. This is especially useful for responsive video embeds.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Object-Fit Video</title>
    <style>
        .video {
            width: 100%;
            height: auto;
            object-fit: cover;
        }
    </style>
</head>
<body>
    <video class="video" controls>
        <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
        Your browser does not support HTML video.
    </video>
</body>
</html>

Explanation: The object-fit: cover; property ensures the video fills its container without distortion, cropping if necessary.

Responsive Iframe Videos

Iframe videos, such as embedded YouTube or Vimeo content, can be made responsive using a combination of CSS and the aspect ratio technique.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Iframe Video</title>
    <style>
        .iframe-container {
            position: relative;
            width: 100%;
            padding-top: 56.25%; /* 16:9 Aspect Ratio */
        }
        .iframe-container iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <div class="iframe-container">
        <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen></iframe>
    </div>
</body>
</html>

Explanation: The iframe is scaled to maintain its aspect ratio and fill its container proportionally.

Key Takeaways

  • Aspect Ratio Box: Use padding to create scalable aspect ratio containers for videos.
  • Object-Fit: Ensures videos fill their containers without distortion.
  • Responsive Iframes: Make iframe videos adaptable using the aspect ratio technique.
  • Cross-Device Compatibility: Responsive videos enhance the viewing experience on all screen sizes.
Prev Next