Does anyone know how to make a 9:16 sized YouTube reel video responsive on Webflow?

Published on

September 22, 2023

To make a 9:16 sized YouTube reel video responsive on Webflow, you can follow these steps:

Embed the video: First, you need to embed the YouTube video on your Webflow page. To do this, click on the "+ Add" button in the Webflow Designer and select "Embed". Then, paste the YouTube video's embed code into the provided field.
Set the video container: Next, you need to create a container for the video. Add a div block element around the embedded video. This div block will act as the container for the video.
Apply responsive styling: To make the video responsive, you need to apply some styling to the video container. Here's how you can achieve this:

Select the div block wrapping the video.
In the Style panel, go to the "Size" section and set the width to 100%.
In the "Padding" section, set the bottom padding to "56.25%". This will maintain the video's aspect ratio of 9:16 (16 divided by 9 is 1.7778, which is approximately 56.25%).
Enable the "Position" feature by clicking on the toggle switch.
In the "Position" section, select "Relative" as the position type.

Add padding-bottom hack (optional): Sometimes, the responsive styling mentioned above might not work as expected in certain situations. In such cases, you can add the following custom CSS to the page settings or to a custom code block:
```css
.your-video-container {
position: relative;
padding-bottom: 56.25%;
}
.your-video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
```
Replace .your-video-container with the class or ID of your video container.
Preview and test: Lastly, preview your website and test the responsiveness of the embedded YouTube video. The video should automatically adjust its size and maintain the 9:16 aspect ratio when viewed on different screen sizes.

By following these steps, you should be able to make a 9:16 sized YouTube reel video responsive on Webflow.