Please help! Video embed should open upon clicking button of CMS portfolio

Design help Animations & Interactions
1

Hi everyone! I have been trying to wrap my head around this for quite a while now, but it’s still not working as it should.

Pages involved:

  • Home
  • CMS Portfolios Template
  • CMS Industry Categories Template

Third-party web app to encode and embed video from my YouTube channel:
https://app.vidzflow.com
YouTube Channel: https://www.youtube.com/channel/UCTbvSbtG5VyLk1TKdBIgiCg

I have followed this tutorial: https://university.webflow.com/lesson/build-a-pop-up-with-fixed-positioning?topics=layout-design

Basically, I have a home page that randomly displays 3 samples of my CMS template portfolio page. Each one displays a thumbnail from the CMS collection Portfolios, the name of the client underneath (irrelevant here), and I added a button on top to be able to open a pop-up that automatically launches the video I’m hosting with Vidzflow. The Pop-up wrapper is positioned on top of the page, right under BODY.

I added the Vidzflow embed code using a Rich Text Block and adding an embed code in the Portfolios CMS Collection Page and the button is supposedly calling the video to open on a darkened background and play automatically.

Except that it doesn’t. And the button disappears on the online page.

Screenshot 2023-11-07 at 17.32.01
Screenshot 2023-11-07 at 17.32.011920×1331 94.8 KB

Screenshot 2023-11-07 at 17.33.23
Screenshot 2023-11-07 at 17.33.23966×824 49.2 KB

Based on the same logic, I created a CMS template collection to generate 8 pages dynamically. Each page (Technology, Healthcare, Event Management Agencies, Education, Foodservice, Startups, Marketing & Creative Agencies) present up to 6 thumbnails (added directly to the CMS Industry Categories Template for now, but I assume they should be added to the CMS Portfolios Template instead) and the same button which, when clicked opens the pop-up of the video it’s referring to. Then the video should play automatically.

Screenshot 2023-11-07 at 17.34.21
Screenshot 2023-11-07 at 17.34.211920×1037 90.6 KB

Anyone can help me fix this?

Thanks!

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

2

Mostly it seems to be working fine on Chrome.
I think you have one interactions glitch and possibly an embed HTML glitch to fix but it’s otherwise functioning.

3

Read-only preview link

Hey Michael,
Thanks so much for taking the time to post your reply! You are right on a couple of things:

  1. All video content is muted.
  2. The video link for Philips was outdated, I fixed it.

I’ll follow your advice and try to fix the animation upon closing the modal and spread it to the other pages.
What is weird is that on my Mac, none of the arrow buttons seem to work, whether on Chrome or Safari. Any idea why? It looks like you’re on PC… So does it mean it won’t work on Mac/iOS? I checked on my iPhone and some videos are triggered, and others are not… Confusing! Any advice?
Thanks!
Arthur

4

I’d clone and simplify to see if that works in the published view for you;

  • Avoid nested click interactions
  • Maybe convert the link block to a div ( right click it ), to avoid browser confusion
  • Maybe ditch nested interactions overall, the one that jiggles it around could poss confuse the browser’s understanding of where the click spot is?
  • Try putting just your click modal pop-up interaction on that outer wrapper
  • It might even work with the jiggle on hover

Note you’ve got a few things going on there

image
image1069×565 108 KB

5

Will do! Thanks so much for your help!
I really appreciate it!
Read-only preview Link