Stop Video Playing on Modal Close

I have a modal option in a custom module that when activated, opens and closes the modal via css. When the modal is turned on, it gives the user a rich text module for content. If I insert a Hubspot video via the rich text module, the video continues to play when the modal is closed.

I am assuming I would probably need to use javascript to access the video element in the iframe. However, I need vanilla javascript due to not using jQuery on the site.

Looking for assistance/suggestions on how I can stop the video when the modal is closed.

Thanks,

Terry McMillan

Hi Terry, that can be really frustrating for sure. Can you share a link or some code? That will help tell how is the modal is setup to display and what options you may have to control the video.

An alternative to consider, is creating a select option for various types of content blocks to be available for use in the modal (rich text, video, image, etc). This would allow better control over the code that supports each type of media.

Best,

CR Rollyson

@siderole

I am about to publish the site so I will provide a page link once I do. Basically, the modal is being displayed via css :target using visibility and opacity. One of my main goals was to use as little javascript as possible across the whole site and utilize a css solution whenever possible. However, I don’t mind using js if the need is necessary.
Is there any sort of API for the Hubspot video player that could be used to control the video similar to Vidyard or YouTube? Or maybe just the genearl HTML 5 video API’s?

It would be strange not to be able to control the player somehow programmatically. Maybe a way to “refresh” the Hubspot div that contains the iframe on a click? (without a complete page refresh)

Thanks,

Terry