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

Sass or SCSS @mixin vs @extends vs Placeholder (%)

Why You Should Run Cronjobs In Laravel?

@stack @push and @prepend In Laravel Blade

Basic Server Security Setup For Ubuntu / Linux

Accessors And Mutators In PHP Laravel

Send SMS With Amazon SNS (Simple Notification Service) Using PHP

Relationship Table Data With Route Model Binding In Laravel

Install NGINX In Linux / Ubuntu And Managing

File Upload In Laravel PHP

Multiple GIT Key Pairs Or Account In The Same Computer

Prevent Multiple Form Submits

Factories To Speed Up Test-Driven Development In Laravel

Simple Way To Create Resourceful API Controller In Laravel

Hotlink Protection In Nginx

PHP extension ext-intl * is missing