When you add or embed a youtube video on your site, the following happens:
- Black space around the video
- The youtube video is not responsive
- Youtube Video is overflowing the mobile screen
- 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&controls=0&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:
- Goto Aspect Ratio Calculator
- 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
- 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&controls=0&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