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

SummerNote WYSIWYG Text Editor

What Is Composer? How Does It Work? Useful Composer Commands And Usage

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

SummerNote WYSIWYG Text Editor Save Images To Public Path In PHP Laravel

Run Raw Queries Securely In Laravel

Responsive YouTube Videos

Stripe Payment Integration With Laravel

Laravel Custom Maintenance Page

NGINX Security Best Practices & Optimization

GitHub Login With PHP Laravel Socialite

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

Generate Sitemap in PHP Laravel

Free SSL Certificate In cPanel With ZeroSSL & Certbot

Observers In Laravel

Why namespace And use Keywords Used In PHP