Responsive YouTube and Vimeo Videos to your website

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

Responsive Youtube Vimeo video


Step #2. Add a responsive workaround div to embed html

Add the div tag around the embed html

Step #3. Add the CSS

Just add the css property to your stylesheet.

Now YouTube/Vimeo videos will be responsive in your website. It will be good enough to make responsive any iframe included embed videos.

Editorial Staff

Editorial Staff at tutsplanet is a dedicated team to write various tutorial articles.