How to make a responsive youtube video?

Problem:

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

Result:

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

Result:

Still having issues? Hire us