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”>

Reviewer's Rating!
Leave Your Own Rating!
[Total: 2 Average: 4]

You’ll also like:

  1. How To Fix CLS - Core Web Vitals Issues Caused By Google Adsense
  2. How To Add Google Adsense - Analytics To Wordpress AMP Pages
  3. How To Add Google Adsense For Search Bar To AMP Pages
  4. How To Install Disqus Comments On WordPress AMP Pages
  5. How To Create A Floating Social Bookmarking Google Search Toolbar

Please share this article to help others. Thanks