How to Embed Responsive YouTube Videos on a WordPress?

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.