TikTok videos keep playing when closing a Modal Element

[emile]

Hello,

I want to embed TikTok and Instagram Reel videos inside a number of Modal elements (V2). I inserted a Raw Content element in the modal and pasted an embed code in it. It shows up fine on the front-end. The problem is that if I open the modal and play a video, it will keep playing in the background if I close the modal. I want the embed to stop or be muted whenever the modal is closed by the user.

I tried using the now deprecated Content Area Modal element, since it has a “Load / reset on element toggle”. (as referred in this thread). The issue with this is that when I load the page, then open the modal, the “video” part of the embed isn’t loaded and instead I see a “View this post on Instagram” button.

This thread talks about giving the attribute data-rvt-offscreen-reset to a Video element inside a Modal, which mimics the Dynamic Rendering option mentioned above. Is there any way to mimic this Dynamic Rendering option when embedding TikTok and Reels in a Modal?

I also tried to embed these in a slider, but I end up with the same issue - the videos keep playing when browsing the next slides.

Thanks in advance

Emile

[tristup]

Hi Emile,

Adding the data-rvt-offscreen-reset custom attribute to the Modal element is the available solution for the dynamic rendering. I would suggest you go through the following thread on the same topic.

Video in modal won't stop playing when closed

Hi @clefler, I have discussed with my senior colleague Christian on the solution provided by Scot and he confirmed that it is the solution to the problem you are having. Just add the data-rvt-offscreen-reset to Modal Custom Attribute to get the solution. [Screenshot 2022-08-01 195442] Hope it helps. Thanks

Hope it helps.
Thanks

[emile]

Hi Tristup,

Appreciate the quick reply! I tried adding the data-rvt-offscreen-reset custom attribute to the Modal element. It works with Youtube video embeds, but not with Instagram / TikTok embeds.

The issue is that the Instagram or TikTok embeds don’t load properly when using that attribute.

Probably linked to the order in which things load on the page?
Any way to make sure the embeds display properly when using this attribute?

Thanks in advance!
Emile

[ruenel]

Hello @Emile,

I have investigated your issue and I found out that adding data-rvt-offscreen-reset to the Modal element will create a conflict with the TikTok video embed code. Regretfully we do not have any controls on the scripts that loads the TikTok video. It seems that TikTok video embed code does not allow dynamic rendering. What you are trying to accomplish like closing the Modal will stop the video is not possible with the embed. It could be that TikTok are not meant to be embedded in Modal popups.

Best Regards.