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
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:
|
2 3 4 |
<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.
Step 1: Remove iframe width and height
Remove iframe width and height. Our snippet will now look like this:
|
2 3 4 |
<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.
|
2 3 4 5 6 |
<div class="video-container"> <iframe src="https://www.youtube.com/embed/wzQrwcraS7Y" allowfullscreen></iframe> </div> |
Add a class such as “embed-youtube-video” to the iframe.
|
2 3 4 5 6 |
<div class="video-container"> <iframe class="embed-youtube-video" src="https://www.youtube.com/embed/wzQrwcraS7Y" allowfullscreen></iframe> </div> |
Step 3: Add CSS for div container and class
Add CSS to the container class “video-container” and iframe class “embed-youtube-video”.
|
2 3 4 5 6 7 8 9 10 11 12 13 |
.video-container { position: relative; width: 100%; padding: 20px; } .embed-youtube-video { aspect-ratio: 16 / 9; width: 100%; } |
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
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
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’.
16:9 is the standard aspect ratio for YouTube on a computer.
Suggested Read
Pradeep Maurya is the Professional Web Developer & Designer and the Founder of “Tutorials website”. He lives in Delhi and loves to be a self-dependent person. As an owner, he is trying his best to improve this platform day by day. His passion, dedication and quick decision making ability to stand apart from others. He’s an avid blogger and writes on the publications like Dzone, e27.co
