How to Embed Responsive YouTube Videos on a WordPress?

Recently, I came across a problem while embedding a YouTube video on one of my blogs. Being a tech blog, I post a lot of gadget related articles which need video demos. Eventhough I am using a responsive theme, it doesn’t mean all the elements on the page convert themselves to suit the browser resolution. It is apt in the case of the embedded YouTube videos which looks fine on desktop computers, but looks clumsy while viewing from a mobile device. At first, I just tried to set the width to 100% so that the videos will automatically adjust their size according to the browser size. Unfortunately, it didn’t solve the problem.

After Googling, I just landed on where the author just wrapped the embedded YouTube video with a <div> container. He then styled it by specifying the child elements like iframe, object and embed with absolute position + allotted 100% width & 100% height. Doing so will force the embedded elements to resize to fullwidth automatically.

Also see: How to Make Adsense Ads Responsive?

How to Make a YouTube Video Mobile Responsive?

Go to your style.css file (WordPress) or Template > Edit HTML and copy-paste the below css code at the end.

.responsiveyoutube {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px; height: 0; overflow: hidden;

.responsiveyoutube iframe, .responsiveyoutube object, .responsiveyoutube embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;

Save the changes.

Next, whenever you add or embed any videos (YouTube or Vimeo) in your post, simply wrap the iframe within the <div> tag like as shown below.

<div class=”responsiveyoutube”>Insert your YouTube or Vimeo Embed</div>

Now, if you preview your article or webpage from your mobile device, you’ll notice that the embedded video adjusts itself according to your device screen size.

For a working example, visit this page and resize your browser to witness the responsive YouTube videos.

Incoming search terms:

  • yhs-fullyhosted_003
  • how make video responsive in wordpress?
Last Updated on by Radha Krishna under Blogger, Wordpress Category 2 Comments



Share This Article

Get Free Email Alerts

Stay Updated with Useful Blogging Tips. Get Free Email Newsletter Updates..

And, Next Confirm Your Email Subcription


2 Comments to “How to Embed Responsive YouTube Videos on a WordPress?”

  1. Vishnu says:

    Latest version of wordpress are more suitable for embeding videos on blogs
    Vishnu recently posted..How to Get More Traffic to Your WebsiteMy Profile

Leave your comment here:

CommentLuv badge

Unable to load the Are You a Human PlayThru™. Please contact the site owner to report the problem.

We Use & Recommend
[Bluehost - Review | Installation | Discount ] Bluehost Coupon
Free Email Alerts
Facebook Twitter Google Plus RSS Feed Email
Rate Us

Like US