Playing/pausing a background video on element interaction

Design help Animations & Interactions
1

Hello, I am trying to figure out if it is possible to have a background video with autoplay enabled begin its playback on an element trigger rather than when a page loads. What I am imagining is for the background video to begin playing when a popup is triggered, however I don’t know of a way to change the background video from playing as soon as the page loads.

Alternatively, it seems like many people use the video embed feature as this can be better controlled with custom code instead of webflows built in background video element. In this case, is there a way to embed a video without having the grey overlay that you get when embedding vimeo and youtube videos? I know if you pay for a subscription version of vimeo you can embed the video without the grey play button overlay but I would prefer a solution where I don’t need to pay for vimeo.

I modified this popup tutorial to include an background video element to demonstrate the concept. Ideally the video will only start playing when a specific modal is opened.

https://preview.webflow.com/preview/popup-tutorial?utm_medium=preview_link&utm_source=designer&utm_content=popup-tutorial&preview=5ca93fa422fccad0cc879e5a3e1f04e3&workflow=preview

2

I put the video in a modal and then use this script.

<script>
$(document).ready(function() {
    // Event listener for closing the modal
    $(document).on("click", ".modal-close-2", function() {
        // Stop all iframe videos (assuming they are from Vimeo or similar)
        $('iframe').each(function() {
            var src = $(this).attr('src');
            $(this).attr('src', ''); // Remove the src to stop the video
            $(this).attr('src', src); // Reassign the src to reset the video
        });
    });
});
</script>