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.

Writing Clean Code In PHP

Foreign Key Migrations Simplified In Laravel 7.x

Global Data In All Laravel Blade Pages

Select2 Dropdown

Observers In Laravel

Relationship Table Data With Route Model Binding In Laravel

Getting Started With AMP (Accelerated Mobile Pages)

Setup AMP (Accelerated Mobile Pages) In PHP Laravel

Add Analytics To AMP (Accelerated Mobile Pages) HTML Pages

Add Google ADS In AMP (Accelerated Mobile Pages) Website