Tutorials for web designers and developers
Tutorials for Developers_
Close this search box.
Hafiz Faraz Mukhtar

Hafiz Faraz Mukhtar

Hafiz Faraz Mukhtar is an expert Web Developer, SEO specialist, and Graphic Designer. Hafiz Faraz is an expert in WordPress design and development. Hire on Upwork | Hire on Fiverr


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="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

<!-- Youtube auto resizer script -->
<script src="https://cdn.rawgit.com/skipser/youtube-autoresize/master/youtube-autoresizer.js"></script>

<!-- Your video embed code, add width and height of video -->
<iframe width="700" height="270" src="https://www.youtube.com/embed/9bZkp7q19f0?rel=0&amp;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="https://www.youtube.com/embed/9bZkp7q19f0?rel=0&amp;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

Leave a Reply

Your email address will not be published. Required fields are marked *