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.
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.