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

Install Apache Web Server On Ubuntu 20.04 / Linux & Manage It

Custom Validation Rules In PHP Laravel (Using Artisan Command)

Multiple File Uploads In Laravel PHP

Accessors And Mutators In PHP Laravel

Free SSL Certificate For CPanel

Lazy Load Images In Chrome With This Simple Trick

Create Zip File On The Fly With Streaming Download In PHP Laravel

Responsive YouTube Videos

Client-Side Form Validation With Javascript

composer.json v/s composer.lock

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

Securely SSH Your Server & Push Files With FileZilla

NGINX Security Best Practices & Optimization

What Is HTTP? Different HTTP Methods And Status Codes Explained With Examples

Free SSL Certificate With Lets Encrypt/Certbot In Linux (Single / Multiple Domains)