
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.
Client-Side Form Validation With Javascript
Laravel Clear Cache Of Route, View, Config Command
Relationship Table Data With Route Model Binding In Laravel
Client-Side DataTable, Adding Super Powers To HTML Table
Lazy Load YouTube And Other Videos In Website
Test Your Local Developing Laravel Web Application From Phone Browser Without Any Software
Setup MAMP Virtual Hosts For Local PHP Development
Google, Twitter, GitHub, Facebook & Many Other Social Generic Logins With PHP Laravel Socialite
Lazy Load Images In Chrome With This Simple Trick
PHP Built-In Web Server & Testing Your Development Project In Mobile Without Any Software
Debugging Laravel Queue Email Issues
What Is Composer? How Does It Work? Useful Composer Commands And Usage
Push Files To CPanel / Remote Server using FTP Software FileZilla