How To Make YouTube Vimeo Embeds Responsive In HTML

This quick tutorial will show you how to make any YouTube or Vimeo video you embed in your HTML site responsive. The codes used here can be found in the description box down below.

Simple copy and paste the style code to the stylesheet section of your web page

Wrap your YouTube Vimeo embed code with the div tag and make sure to close the tag and you’re done.

That’s all folks. Have a nice day.


Stylesheet CSS Code: .video-responsive{ overflow:hidden; padding-bottom:56.25%; position:relative; height:0; } .video-responsive iframe{ left:0; top:0; height:100%; width:100%; position:absolute; }

DIV Tag: <div class=”video-responsive”>

You’ll also like:

  1. How To Add Google Adsense For Search Bar To AMP Pages
  2. How To Add Google Adsense - Analytics To Wordpress AMP Pages
  3. How To Create A Floating Social Bookmarking Google Search Toolbar
  4. How To Setup Hyper Cache On Shared Hosting Server
  5. How To Install Disqus Comments On WordPress AMP Pages

Home » Tech Tutorials » How To Make YouTube Vimeo Embeds Responsive In HTML

Please rate & share this article to help others. Thanks