youtube-video-aspect-ratio-resolved-resizing-correctly

How to make a responsive youtube video?

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

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.

Step 2: Replace youtube video embed link with your video embed link, here is how you find the embed link
how-to-embed-youtube-video
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 aspect-ratio-calculator
  3. Now enter the new width and height in your iframe like this,
    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