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

Free Live Chat Integration Using TAWK.IO

Select2 Dropdown

Setup Docker for NodeJs, MongoDB, MongoDB Compass

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

Manipulate HTML Using DOMDocument In PHP

Accessors & Mutators In Laravel. Problem In Set Attribute While Saving/Updating Data & How To Resolve It

New Features In Laravel 8

SummerNote WYSIWYG Text Editor Save Images To Public Path In PHP Laravel

File Upload In Laravel PHP

SummerNote WYSIWYG Text Editor

Redirect www to a non-www Website Or Vice Versa

Sass or SCSS Tutorial

Send Email In PHP With PHPMailer

NGINX Security Best Practices & Optimization

Why You Should Run Cronjobs In Laravel?