How can I create a dynamic lightbox for YouTube and Vimeo videos on Webflow that stops the video when the modal is closed?

To create a dynamic lightbox for YouTube and Vimeo videos on Webflow that stops the video when the modal is closed, you can follow these steps:

1. Start by designing your modal in Webflow. Add a div block or any other element that will serve as your modal container.

2. Inside the container, add an embed component for your video. You can find this component in the "Add" panel on the right side of the Designer interface. Choose either the "YouTube" or "Vimeo" option, depending on the video service you're using.

3. Once you've added the embed component, Webflow will prompt you to enter the video URL. You can use a static placeholder URL for now, as we'll be replacing it dynamically later.

4. Now, duplicate the modal container to create as many modals as you need for different videos. Make sure each duplicated container has a unique class name or ID.

5. Next, set up the interactions. Select the modal container and go to the "Interactions" panel. Create a new interaction that triggers when the modal opens.

6. Within the interaction, add a "Start Video" action for the embedded video. This action will play the video when the modal is opened.

7. Create another interaction that triggers when the modal closes. Within this interaction, add a "Stop Video" action for the embedded video. This action will stop the video playback when the modal is closed.

8. Now comes the dynamic part. Select the first modal container and navigate to the "Settings" panel. Under the "Custom Attributes" section, add a new attribute called "data-video-url" and set its value to the URL of the YouTube or Vimeo video you want to display in this modal.

9. Repeat step 8 for each modal container, assigning a unique video URL to each one.

10. Lastly, you need to add some custom code to replace the static URL with the appropriate dynamic URL when the modal opens.

11. Create a new embedded code component inside the modal container. Click on the "Settings" icon of the embedded code, and in the code editor, write the following JavaScript function:

```

```

12. Replace `'your-modal-class'` in the code above with the class or ID of your modal container. This code snippet will retrieve the dynamic video URL from the modal container's custom attribute and set it as the source for the embedded video.

13. Save and publish your site, and you're done! Each modal should now play the correct video and stop when closed.

By following these steps, you can create a dynamic lightbox for YouTube and Vimeo videos on Webflow that stops the video when the modal is closed.