How to make a responsive youtube video?

In CSS, jQuery, Wordpress, Youtube by hfarazmLeave a Comment


When you add or embed a youtube video on your site, the following happens:

  1. Black space around the video
  2. The youtube video is not responsive
  3. Youtube Video is overflowing the mobile screen
  4. How to make youtube video link stretch to full-width of container on large screens

Solution: Remove Youtube Black Space

First, let’s see how you can remove black space and make video responsive and then we will make video full width.
Step 1: Paste the following code on your web page.

<!-- jQuery script -->
<script src="//"></script>

<!-- Youtube auto resizer script -->
<script src=""></script>

<!-- Your video embed code, add width and height of video -->
<iframe width="700" height="270" src=";controls=0&amp;showinfo=0"  allowfullscreen></iframe>

Step 2: Replace youtube video embed link with your video embed link, here is how you find the embed link

Solution: Make youtube video full width

The above video is not full width on a larger screen. Let’s make it full-width:

  1. Goto Aspect Ratio Calculator
  2. Enter ORIGINAL video width i.e 560 and height i.e 315 in my case as seen above on line no. 8 and then add the desired width to calculate the correct video size when resized e.g for me it is 700×393 aspect-ratio-calculator
  3. Now enter the new width and height in your iframe like this,
    <!-- Full width video embed code -->
    <iframe width="700" height="393" src=";controls=0&amp;showinfo=0" allowfullscreen></iframe>

    Notice that my iframe width and height was 560 x 315 and now it 700 x 393. This is because, the container in which I am pasting iframe is 700px in width so I told the script that video should be 700px in width and then  it will automatically adjust on smaller screens.


Still having issues? Hire us

About the Author


Leave a Comment