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

Simple Way To Create Resourceful API Controller In Laravel

What Is Method Chaining In PHP?

Move Uploaded Files From Local Computer Or Server To Amazon S3 Bucket In PHP

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

Free SSL Certificate For CPanel

Stripe Payment Integration With Laravel

Proper Way To Validate MIME Type Of Files While Handling File Uploads In PHP

Lazy Load YouTube And Other Videos In Website

Comment And Like System Using Disqus

Generate RSS Feeds in PHP Laravel

Accessors & Mutators In Laravel. Problem In Set Attribute While Saving/Updating Data & How To Resolve It

Relationship Table Data With Route Model Binding In Laravel

Google reCAPTCHA Integration In PHP Laravel Forms

Manipulate HTML Using DOMDocument In PHP

New Features In Laravel 8