
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.
In this article let's see how to make responsive YouTube videos.
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>
.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%;
}
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.
Free Live Chat Integration Using TAWK.IO
Setup Docker for NodeJs, MongoDB, MongoDB Compass
Sass or SCSS @mixin vs @extends vs Placeholder (%)
Manipulate HTML Using DOMDocument In PHP
SummerNote WYSIWYG Text Editor Save Images To Public Path In PHP Laravel
SummerNote WYSIWYG Text Editor
Redirect www to a non-www Website Or Vice Versa
Send Email In PHP With PHPMailer