Trigger to play embedded video

Design help General
1

I’m looking to embed a Wistia hosted video in a container on my page. The idea is to click on the play button (see attached image) which then loads and plays an embedded video. Any suggestion on how I can do that?

800×403 35.3 KB

my second option would be to launch the video into a modal/lightbox window. I can only see some hacks on the forum and there was talk a little while ago about a solution being available soon. Any news?

Cheers

Kain

2 Likes
2

use jQuery to do something like…

1 - user clicks on play button (or the text “Take control of your life” and/or the play button
2 - jQuery fades out your hero row with the mountains
3 - jQuery fades in your div with the video in it
4 - after the fadeIn() function is done, use Wistia’s API to auto play the video

1 Like
3

Thanks @PixelGeek. I’m not sure how to add or what Jquery to add in. How would a non-programmer do it using the default Webflow tools?

4

There’s a way to do this using Interactions - click trigger.

  1. Set an click interaction on the text/play button.
  2. Make it affect the class that you assign to the video. When it’s clicked make the video class display block.
  3. Have the video sit on top of the text (you can use absolute position for this)
  4. Set initial appearance for the video to be display:none.
  5. Add an X close icon in the top right corner that appears as well when clicking on the link.
  6. Add an interaction to it that makes the video go back to display:none.

BOOM!

You can also add a class with transparent black over that top section that also appears - so that it feels like it "fades away that section. Btw, the user might have to click a second time on the video to play it. You would have to mess with that to make it have the best user experience.

4 Likes
5

Did you end up implementing this on you site @kain? Would love to see an example.

6

@thelle I did have it working but I never published the site and have since taken it down. Sorry, wish I had something I could share!

7

Hi @thelle, if you have a link to your site to share, we could look at your setup and provide some tips how to get that working :smile:

Cheers, Dave

8

Hi Sergie,

Any ideas how to trigger html5 video to start playing with this method? If I have “autoplay” attribute for hidden video then clicking play button reveals video at random playback moment.

P.S. I don’t like default video controls so I need custom play button