Need help with Full Width Slider / Responsive Video inside Flex Box

SBobby83 · September 7, 2016, 7:05pm

Seems like I can’t find anything regarding …

How to develop a full width slider that has two flex divs:

One div has text and block quote
Second div has a video uploaded from vimeo that is responsive and keeps its aspect ratio. (When in different dimensions - I lose the play button among other assets in the video “title, description, initial video image”.

I have played with this for some time and I just can’t get it.

Here is a link to the site I am trying to mimic (scroll down to see the full width slider with text and image)

Here is the link preview to the site I’m currently working on (go to “CleanSpeak” page and scroll down).

Any help would be deeply appreciated!

Please keep in mind I want the video to keep its proper aspect ratio and be responsive within the section itself among multiple devices.

Thanks!

Here are some example screenshots of the section and the video dimenson -

Here is my public share link: LINK
(how to access public share link)

vincent · September 7, 2016, 7:34pm

Hi, I hope this helps. I removed your vertical dimensions and forced a couple elements to 100% height.

SBobby83 · September 9, 2016, 3:52pm

Vincent - YOU THE MAN!

Thank you for the direction. The 100% height was one of a few more elements I did not consider when implementing a full width slider and video.

For anyone wishing to do the same in the future - one thing to consider if slides have video and images:

The iFrame from whatever video platform you choose will pigeon hole your dimensions when attempting to make the slider responsive. You will also run in to issues where the images will not line up properly within the dimensions the iFrame is forcing the video to constrain to.
SOLUTION! - Check the video iFrame dimensions and set your image dimensions to correspond. This is my work around , and to be honest - it looks pretty sexy.

If anyone else has any other approach or to add - please do.

Thanks again Vincent!

vincent · September 11, 2016, 11:09am

It does

Thanks for the nice words and time taken for feedback and advices man. really helps.

cyberdave · September 11, 2016, 8:27pm

Hi @SBobby83, FYI, this tutorial how to style html video embeds is very helpful to get perfect responsive iframe video every time when using an embed widget [Tutorial] Responsive Video using HTML Embed - Webflow Tips - Forum | Webflow

SBobby83 · September 21, 2016, 2:49pm

Thanks cyberdave - much appreciated!

system · November 21, 2016, 12:02pm

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.