Auto Adjust Embedded YouTube Videos for Different Devices

I worked on my client’s request to adjust Embedded YouTube Videos to full width with a 16:9 aspect ratio on all devices. Finally, I got a handy CSS trick to make iframes responsive.

But before diving into the code, let’s discuss the issues.

Also Read: 4 Massive Benefits of Using YouTube Widget For Business

Table of Contents

Why YouTube videos don’t adapt well to different screens

When you embed a YouTube video, you receive a code snippet that looks similar to the following:


<iframe width="560" height="315" src="https://www.youtube.com/embed/wzQrwcraS7Y" allowfullscreen></iframe>

The challenge with making YouTube videos responsive lies in the default behavior of iframes (the HTML element used to embed videos). By default, iframes have a fixed width and height, which can lead to videos not adjusting well to different screen sizes.

When you embed a YouTube video using the standard iframe code provided by YouTube, it may not adapt smoothly to various devices or screen widths. This lack of responsiveness can result in videos appearing too large or too small on different devices.

Fix Embedded YouTube Videos for responsive view & auto-height

As a result, making a YouTube embed video responsive and suitable for mobile screens requires some additional effort. Fortunately, there is an easy way to achieve this.

Are you want to get implementation help, or modify or extend the functionality of this script?

A Tutorialswebsite Expert can do it for you.

Hire an Expert

Step 1: Remove iframe width and height

Remove iframe width and height. Our snippet will now look like this:


<iframe src="https://www.youtube.com/embed/wzQrwcraS7Y" allowfullscreen></iframe>

Step 2: Add a div container and class

Add a div container with a class “video-container” around the iframe.


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

</div>

Add a class such as “embed-youtube-video” to the iframe.


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

</div>

Step 3: Add CSS for div container and class

Add CSS to the container class “video-container” and iframe class “embed-youtube-video”.


.video-container {
  position: relative;
  width: 100%;
  padding: 20px;
}

.embed-youtube-video {
  aspect-ratio: 16 / 9;
  width: 100%;
}

.video-container {

position: relative;

width: 100%;

padding: 20px;

}

.embed-youtube-video {

aspect-ratio: 16 / 9;

width: 100%;

}

View Demo

Wrapping Words

This method is easy for anyone comfortable with basic CSS and HTML editing. However, it requires work for each YouTube video you want to embed.

Do you want to get implementation help, or modify or extend the functionality of this script? Submit a paid service request

FAQs

How do I resize an embedded YouTube video on all devices?

There is an easy way to resize an embedded YouTube video on all devices. You have to use a small CSS code to embed the YouTube video iframe class. Click here to find CSS

Is it possible to make an embedded YouTube video responsive on all devices?

First, remove the width and height from the iframe. Then, place a div container with the class ‘video-containe’ around the iframe. Assign a class like ’embed-youtube-video’ to the iframe. Apply CSS to both the container with the class ‘video-container’ and the iframe with the class ’embed-youtube-video’.

What is the aspect ratio for embedding YouTube videos?

16:9 is the standard aspect ratio for YouTube on a computer.