Streaming live at 10am (PST)

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


#1

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)

https://stripe.com/atlas

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

Read Only Mode: https://preview.webflow.com/preview/inversoft-v11-0-0-00e0e1e87d5b3282b562c?preview=79c1604890a1293023db293f6d3c8ab7

Un-editable preview: http://inversoft-v11-0-0-00e0e1e87d5b3282b562c.webflow.io/products/profanity-filter

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)


#2

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


#3

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!


#4

It does :smiley:

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


#5

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 :slight_smile: http://forum.webflow.com/t/tutorial-responsive-video-using-html-embed/1316


#6

Thanks cyberdave - much appreciated!


#7

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