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

Manipulate HTML Using DOMDocument In PHP

Generate SSH Key with ssh-keygen In Linux / Unix

Add Analytics To AMP (Accelerated Mobile Pages) HTML Pages

NGINX Security Best Practices & Optimization

Prevent Multiple Form Submits

composer.json v/s composer.lock

Custom Validation Rules In PHP Laravel (Using Artisan Command)

Select2 Dropdown

Foreign Key Migrations Simplified In Laravel 7.x

Website Speed and Performance Optimizations

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

Google, Twitter, GitHub, Facebook & Many Other Social Generic Logins With PHP Laravel Socialite

Laravel Clear Cache Of Route, View, Config Command

Push Files To CPanel / Remote Server using FTP Software FileZilla

Client-Side DataTable, Adding Super Powers To HTML Table