Embedding a video on your website is a great tool to humanise your website and increase conversion. Most of the times, adding an it is as easy as it sounds, upload your video, customise it, copy the code paste it and boom, done you have your awesome video on your site. But in some more specific cases the sizing of the iframe does not match what you are looking for.

I wrote this tutorial to make it super easy for you to size your iframes. Today i am going to show you two usecases for responsive and fixed size.

On vidjet we offer two options for sizing your iframe, responsive or setting the size manually in pixel

When your iframe is in responsive mode we don’t set any fixed height or width. Our iframe will always take 100% of the width of it’s container and will grow accordingly in height to respect the aspect ratio of your video. That is why our embed videos never display the black borders you can see on other players.

What does this mean? Well let’s say you would like to embed a 1920 * 1080 video (16:9 ratio) taking the full width of the screen. On phone the container of the iframe full-width would be about 375px wide (iphone 11). The iframe will have the same width and the height will be dynamically set: 375 * (9/16) = 375 * 0,5625 =~ 211px. On a desktop that is 1250px the same logic will be applied 1250 * 0,5625 = 703,125px

What if I want the iframe to be smaller, instead of taking 100% I want it to be only 80%, and that is where the problem start. Some CMS allow you to choose the size of the container, which is the easiest solution. But not all of them, the theme I am using here for instance, doesn’t have this option. I am going to cover here the solution in details to always size your iframes perfectly by changing two values on the iframe code.

NB: this logic is applicable to all video formats.

To fix this no worries we only need to modify one value padding-bottom and add the desired width to the div with class=”vidjet-video-wrapper”

Here I would like to have my video to 80% of the current width so it fits well and it is still big enough. In order to do this I add width: 80%; just before padding-bottom, and I replace the 56.25% of the padding-bottom by multiplying this value by 80%. which gives us 56.25 * 0.8 = 45%

Now our iframe code should look like:

<div class="vidjet-video-wrapper" style="width:80%; padding-bottom: 45%; position: relative; overflow: hidden; height: auto; margin: 0px auto; " > <iframe class="vidjet-embed-iframe" src="<https://dev-player.vidjet.io/9c3a9450-e2f0-4057-8f23-95a7a4c8f482/f9cdb13c-f48c-4f69-89da-d4865b7862df>" style=" position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 10px; " allow="clipboard-read; clipboard-write; fullscreen" frameborder="0" ></iframe> </div>

The padding-bottom property is used to create the space needed to maintain the aspect ratio of the video. This property specifies the percentage of the width of the container that should be used as height for the video. The padding is necessary to prevent the video from being cut off or distorted when the width of the wrapper changes.

When you adjust the width of the container, you also need to adjust the padding-bottom value in order to maintain the same aspect ratio. This is because the padding-bottom value is a percentage of the container width. So if you reduce the width of the wrapper, you also need to reduce the padding-bottom value to maintain the same aspect ratio.

If you haven’t taken out your calculator sice you were in high-school (totally understandable), I’ve prepared so quick ratios for you to copy-paste

Here first I am going to embed a portrait video, by selecting responsive the video is oversized

And here is the issue, remember when I told you the video grows in height based on the width of the container well applying the same computation to a portrait video causes it to overflow. And this is perfectly normal: 1250 * (16/9) = 1250 *1,77777 =~ 2222px which is way taller than your screen-height. If I used the technique we used earlier then we would need the iframe to 25% of the current width, but then it would look too small on mobile

In that case the best solution for me is to set the iframe size directly so the video will look good in all screen sizes. I will set the width of the iframe to 300px, as the smallest phone screen sizes are around 375px, automatically Vidjet fills the the height input so the iframe will respect my video ratio.

On my desktop and on my phone the video has a good size.