
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.
Add Analytics To AMP (Accelerated Mobile Pages) HTML Pages
Simple Way To Create Resourceful API Controller In Laravel
Factories To Speed Up Test-Driven Development In Laravel
PHP file_put_contents failed to open stream: Permission denied
Integrate Google Translate Into Your Website
Install RabbitMQ with Docker & Running with NodeJS
Free Live Chat Integration Using TAWK.IO
NGINX Security Best Practices & Optimization
Supervisor For Laravel Queue Scheduling
Relationship Table Data With Route Model Binding In Laravel