Good content takes time and effort to come up with.

Please consider supporting us by just disabling your AD BLOCKER and reloading this page again.







Responsive YouTube Videos | StackCoder


Responsive YouTube Videos


Share On     Share On WhatsApp     Share On LinkedIn


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







Author Image
AUTHOR

Channaveer Hakari

I am a full-stack developer working at WifiDabba India Pvt Ltd. I started this blog so that I can share my knowledge and enhance my skills with constant learning.

Never stop learning. If you stop learning, you stop growing