Skip to main content

Display embedded items nicely

Display items in embed box with the appropriate proportion

Updated over 10 months ago

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

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 same aspect ratio as that of the video, then select image type, and set width to 100%. Height will be automatically added.

3. Place embed box 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?