All Collections
Troubleshooting
How can I fit the iframe to the video aspect ratio?
How can I fit the iframe to the video aspect ratio?
api.video avatar
Written by api.video
Updated over a week ago

We are sometimes asked, "Is there a way to force a video to fill the iframe instead of having black bars?"


The short answer is no. There's no way to force a video to fill the iframe.

But the good news is that there is a way to fit the frame to the video aspect ratio (i.e., no black bars.)

TLDR: If you want the video to fill all the space in the player, you must set the iframe dimensions using the same ratio as your video.
​

For a 1280x720p video you can use an iframe size of:

  • width=640px and height=360px

  • or width=320px height=and 180px.

To explain a bit more...
​

The black bars are related to the display size and the ratio in use in the video. The video is displayed in our player in an iframe.


The iframe code contains two attributes whose values can be changed in %(of the parent container) or absolute pixel value.
​

E.g., If you display the iframe with width and height at 100%, the player will take all the available space.


At this point, the black bars are shown because of your display size. Then if you decide to embed your player in an iframe that fits your video ratio, you won't see any black bars.

  • For a vertical video of 480x640 pixels ratio is 0.75 = 3/4

  • For a horizontal video with the same dimension rotated, the ratio will be 1, 33 = 4/3

Did this answer your question?