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

Upload Multiple Files In PHP?

Install Linux, NGINX, MYSQL, PHP (LEMP Stack) on Ubuntu

Supervisor For Laravel Queue Scheduling

Send Email In PHP With PHPMailer

Responsive YouTube Videos

Comment And Like System Using Disqus

Laravel Clear Cache Of Route, View, Config Command

New Features In Laravel 8

What Is HTTP? Different HTTP Methods And Status Codes Explained With Examples

Testing Laravel Emails With MailHog

Basic Server Security Setup For Ubuntu / Linux

Upload Files In PHP?

Laravel App Deployment Checks

Create Custom 404 Page In Laravel

Search Engine Optimization Concepts