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

Client-Side Form Validation With Javascript

Laravel Clear Cache Of Route, View, Config Command

Random Rows In Laravel

Relationship Table Data With Route Model Binding In Laravel

Client-Side DataTable, Adding Super Powers To HTML Table

Lazy Load YouTube And Other Videos In Website

Test Your Local Developing Laravel Web Application From Phone Browser Without Any Software

Setup MAMP Virtual Hosts For Local PHP Development

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

Lazy Load Images In Chrome With This Simple Trick

PHP Built-In Web Server & Testing Your Development Project In Mobile Without Any Software

Hotlink Protection In Nginx

Debugging Laravel Queue Email Issues

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

Push Files To CPanel / Remote Server using FTP Software FileZilla