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.

Steps

1. Create a parent box.

If you specify a width, that value will be the maximum value.

2. Create an image with the 16:9 ratio, 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.

Did this answer your question?