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.

Articles For You

Add Analytics To AMP (Accelerated Mobile Pages) HTML Pages

Simple Way To Create Resourceful API Controller In Laravel

Observers In Laravel

Factories To Speed Up Test-Driven Development In Laravel

PHP file_put_contents failed to open stream: Permission denied

Laravel App Deployment Checks

Integrate Google Translate Into Your Website

Install RabbitMQ with Docker & Running with NodeJS

Free Live Chat Integration Using TAWK.IO

NGINX Security Best Practices & Optimization

Supervisor For Laravel Queue Scheduling

Relationship Table Data With Route Model Binding In Laravel

Getting Started With AMP (Accelerated Mobile Pages)

Responsive YouTube Videos

Upload Image In PHP?