How can I make a Vimeo video in a 2-columned row on a Webflow site take the full height of the row without setting a fixed height for the columns?
Published on
September 22, 2023
To make a Vimeo video in a 2-columned row on a Webflow site take the full height of the row without setting a fixed height for the columns, you can follow these steps:
- Add a 2-column div block to your Webflow page where you want to display the Vimeo video.
- Inside each column, add a Video element from the Webflow elements panel.
- In the first column, click on the Video element, and in the settings panel on the right-hand side, select Vimeo as the video source.
- Paste the Vimeo video URL into the video URL field.
- Next, we need to make the video take up the full height of the row. To do this, we'll use some custom code.
- Give the 2-column div block a class name by selecting it and then going to the Styles panel on the right-hand side. Enter a class name in the 'Class' field.
- Now, navigate to the Page Settings panel by clicking on the gear icon in the top-left corner of the Webflow designer.
- In the Page Settings panel, open the 'Custom Code' tab.
- In the 'Head Code' section, add the following CSS code:
<style> .class-name .w-embed { position: absolute; top: 0; left: 0; width: 100%; height: 100vh; }</style>
Note: Replace .class-name
with the actual class name you assigned to the 2-column div block.
- Once you've added the CSS code, go back to the designer view.
- Select the first Video element in the left column, and go to the Element Settings panel on the right-hand side.
- Add the following custom attribute:
w-embed
- Repeat the previous step for the second Video element in the right column.
- Preview your Webflow site, and you will see that the Vimeo video now takes up the full height of the row.
By following these steps, you will be able to make a Vimeo video in a 2-columned row on a Webflow site take the full height of the row without setting a fixed height for the columns.
Additional Questions:
- How can I embed a Vimeo video in Webflow?
- Can I customize the appearance of a Vimeo video in Webflow?
- What other customization options are available for videos in Webflow?