Make a Responsive 100% Width YouTube Video Embedding

Rakesh Bhardwaj 28th July 2024 in Solution Software, WordPress Tagged CSSTricks, FrontendDevelopment, HTML5, ResponsiveDesign, WebDevelopment, YouTubeEmbed - 2 Minutes

When embedding a YouTube video on your website, ensuring it is responsive is crucial for a seamless user experience across all devices. The key to achieving this lies in using padding and a container element to maintain a fixed aspect ratio. This method is not limited to YouTube but can be applied to most iframe-based embeds, such as slideshows. For example look at the below Youtube Video Iframe:

Standard YouTube Embed Code

A typical YouTube embed code with fixed width and height looks like this:

<iframe width="1189" height="669" src="https://www.youtube.com/embed/azSEbLUxlAc" title="Responsive Youtube Video Embedding -  Always fit to frame to 100%" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

Simply setting the width to 100% doesn’t work, as the height remains fixed, leading to a distorted video. Instead, we need to use a wrapping container with specific CSS styling.

HTML Structure for Responsive Embed

Wrap the iframe in a container and remove the fixed width and height:

<div class="container">
  <iframe src="//www.youtube.com/embed/azSEbLUxlAc" 
  frameborder="0" allowfullscreen class="video"></iframe>
</div>

CSS for Responsive Embed

Use the following CSS to ensure the video is responsive:

.container {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}

.video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Explanation

Container Element: The container is given a height of 0 and a padding-bottom of 56.25%. This padding value is based on the aspect ratio of 16:9 (height/width * 100 = 9/16 * 100 ≈ 56.25%). This approach ensures the container maintains a fixed aspect ratio relative to its width.
Video Element: The iframe is positioned absolutely within the container. Setting the width and height of the iframe to 100% ensures it fills the container completely, maintaining the correct aspect ratio.

This method ensures your embedded video is fully responsive, maintaining its aspect ratio on any screen size.

#ResponsiveDesign, #YouTubeEmbed, #CSSTricks, #WebDevelopment, #HTML5, #FrontendDevelopment

By following these steps, you can create a responsive YouTube embed that looks great on any device. This technique can be applied to other iframe-based content, making it a versatile solution for various embedding needs.

Visited 152 times, 1 visit(s) today