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.
Securely SSH Your Server & Push Files With FileZilla
Install Linux, Apache, MYSQL, PHP (LAMP Stack) on Ubuntu
Google reCAPTCHA Integration In PHP Laravel Forms
Route Model Binding In Laravel & Change Default Column id To Another Column
Create / Save / Download PDF From Blade Template In PHP Laravel
Simple Way To Create Resourceful API Controller In Laravel
NGINX Security Best Practices & Optimization
Website Speed and Performance Optimizations
Lazy Load Images In Chrome With This Simple Trick
@stack @push and @prepend In Laravel Blade
Search Engine Optimization Concepts
Accessors And Mutators In PHP Laravel
Why namespace And use Keywords Used In PHP
Upload File From Frontend Server {GuzzleHttp} To REST API Server In PHP {Laravel}
Custom Validation Rules In PHP Laravel (Using Artisan Command)