This article is an introduction on how to maintain the proportions of an item in iframe.

E.g.) Displaying YouTube elements neatly while maintaining the 16:9 ratio.

E.g.) Displaying Vimeo elements neatly while maintaining the 1:1 ratio.

Steps

1. Create a parent box. If you specify a width, that value will be the maximum value.

2. Create an image with the same aspect ratio as that of the video, then select image type, and set width to 100%. Height will be automatically added.

3. Place iframe element in the parent box with absolute position, and configure top: 0, left: 0, right: 0, bottom: 0.

In addition to the YouTube video (16:9) used in the above explanation, the same procedure can be used to successfully display videos of various ratios on Vimeo.

Did this answer your question?