YouTube and Vimeo allows users to embed the videos in there web page such as blog, eCommerce. However the videos are not responsive by default. We need to have some work around to get this done.
Step #1. Get the YouTube Embed Code
Go to YouTube and click on the share link seen bottom of the video, then click on the embed tab to get the embed code
Step #2. Add a responsive workaround div to embed html
Add the div tag around the embed html
<div class="video-wrapper"> <iframe width="560" height="315" src="https://www.youtube.com/embed/zDo0H8Fm7d0" frameborder="0" allow="autoplay; embedncrypted-media" allowfullscreen></iframe> </div>
Step #3. Add the CSS
Just add the css property to your stylesheet.
.video-wrapper{ overflow:hidden; padding-bottom:56.25%; position:relative; height:0; } .video-wrapper iframe{ left:0; top:0; height:100%; width:100%; position:absolute; }
Now YouTube/Vimeo videos will be responsive in your website. It will be good enough to make responsive any iframe included embed videos.
- Just want to thank us? Buy us a Coffee
- May be another day? Shop on Amazon using our links.
Your prices won't change but we get a small commission.
Leave a Reply