I could really use some help with this site I am working on for a client. I have a page with a CMS collection included with videos. The client doesn’t want the videos to be instantly visible as they are heavily YouTUbe branded so would like to hide behind a pop-up.
Two issues I am having are:
1: Making these videos fill the screen and be responsive
2: When the user closes the pop-up, the videos continue to play. I need these to stop on close of the pop-up.
You have a lot of design options here, so I’ll give you some notes as things to investigate-
Look into plyr.js. When a client is hosting videos on YouTube and wants more control over the branding and appearance, I typically use this. It also avoids the problem with related videos on pause and stop.
You want the video inside of the pop-up?
That’s not difficult and another good option. For fast loads, the design i go with is often-
CMS store the video ID ( only ) of the YouTube video.
Use that in the collection list to access the video’s thumbnail URL directly, which I use in the page, with a play button over it.
On click, invoke your interactions based modal, containing the video to play. Here I’ll sometimes use Plyr.js
That setup eliminates the YT branding pretty much entirely, and I get better LCP stats as well since there is no delay waiting for the IFRAMEs to render.
That requires a bit of programming. Both Plyr.js and Webflow’s Embed.ly Player.js players have JS interfaces to pause the video, so you need to write script to detect the modal being closed, and then pause the video.
This is a bit more complex since you have a gallery of videos and you need to know which modal is being closed and which player needs to be paused. But that’s not too difficult.
Here’s some example code you can start with that I wrote for Webflow’s native Embed.ly player.