Embed YouTube Videos Responsively: A Step-by-Step Guide

Adding YouTube videos to your website is a cool way to share content, but sometimes they might not fit well on all devices. We’ll show you how to make these videos look awesome on phones, tablets, and computers with just a few easy steps.

To ensure the embedded YouTube video is responsive, you’ll need to add some additional HTML and CSS.

• Wrap your iframe code with a <div> element that has a responsive class, like this:

<div class="video-container">
   <!-- Paste your iframe code here -->
</div>

• Add the following CSS code to your stylesheet:

.video-container {
   position: relative;
   padding-bottom: 56.25%; /* Adjust this value based on the aspect ratio of your video (16:9 = 56.25%, 4:3 = 75%) */
   height: 0;
   overflow: hidden;
}

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

By following these steps and implementing responsive iframe YouTube videos on your website, you’ll provide visitors with an optimal viewing experience, regardless of their device.