Hi, im trying to create a section with 2 equal size boxes. One with title and text in it where the height is adjusted according to the padding. In the other box I want to have a video of an iPhone playing on loop, covering the entire box whilst staying the same height as the text box.
I have experimented with both the flex box and columns feature as well as with Webflow’s built in background video and embedding custom html5 video code. The problem that I’m getting is that the box with the video in it does not stay the same height as the one with the text in it. (I know that the flex box feature is suppose to adjust to the “tallest” of the two boxes).
But I can’t seem to get it to work so if anyone has some experience with this or know a way to achieve this it would be really helpful.
Sorry for not providing enough information, haven’t posted a lot here before.
And here is a published version:
The Box Section is where I’m trying to achieve this and my goal is to have 2 videos, one in each row. In the links I have provided I’m trying with flex box since columns does not adjust height the way I want to.
Right now the video is scaling but the flex box height is set according to the video box and not the text box and my hope is to have to video box be the same size as the text box with the video filling the box with overflow hidden on the sides.
Here is a link to the video clip if necessary, http://www.flymotion.se/Iphone-Screen.mp4 (Size 2.6MB 1000px x 750px 4:3 aspect ratio)
Best would also to be able to stack the boxes on top of each other on mobile sizes.
Screenshot from Sketch of what I’m trying to achieve