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.

Random Articles For You

Supervisor For Laravel Queue Scheduling

Hotlink Protection In Nginx

Why namespace And use Keywords Used In PHP

Redirect www to a non-www Website Or Vice Versa

Push Files To CPanel / Remote Server using FTP Software FileZilla

Create Gmail App Password For SMTP Mails

Cache Static Files With NGINX Server

Detect AdBlocker With Javascript And Increase Website Ads Revenue

Basic Server Security Setup For Ubuntu / Linux

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

Factories To Speed Up Test-Driven Development In Laravel

Manipulate HTML Using DOMDocument In PHP

SummerNote WYSIWYG Text Editor

Upload File From Frontend Server {GuzzleHttp} To REST API Server In PHP {Laravel}

File Upload In Laravel PHP