Responsive YouTube Videos

In this article let's see how to make responsive YouTube videos.

---

HTML

Copy the embed code of a youtube iframe in your code and wrap a div around it like shown in the following

<div class="youtube-video-wrapper">
    <iframe class="youtube-video" src="https://www.youtube.com/embed/A_0qG-nL6Po" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

---

CSS

.youtube-video-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}
.youtube-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

---

Conclusion

Adding responsive YouTube videos in your website/blogs will add up lot of advantages.

I hope this article helped you. Please share it with your friends.

Articles For You

Create A Composer Package? Test It Locally And Add To Packagist Repository

Lazy Load Images In Chrome With This Simple Trick

Firebase Cloud Messaging (FCM) Browser Web Push Notifications Using Javascript And PHP

Responsive YouTube Videos

Localization In Laravel REST API

Hotlink Protection In Nginx

Upload Files In PHP?

Free SSL Certificate With Lets Encrypt/Certbot In Linux (Single / Multiple Domains)

Install MySQL In Ubuntu 20.04

Debugging Laravel Queue Email Issues

Search Engine Optimization Concepts

Supervisor For Laravel Queue Scheduling

Automate Repeating Tasks In Linux Server With Cronjobs

Sass or SCSS @function vs @mixin

Getting Started With AMP (Accelerated Mobile Pages)