Builder preview loads and autoplays media inside closed Modal / Off Canvas / Dropdown content

Support
#1

Hey team, Hope you’re well!
This issue has been frustrating me for at least a year (probably more), and hoping you can include this as a fix moving forward.

Steps to reproduce

  1. Add a Modal (Dynamic Rendering on or off, it makes no difference).
  2. Put a Video element inside it, type Embed, with a YouTube iframe whose src includes autoplay=1.
  3. Save and reload the builder.

Result: the video starts playing with the modal closed, every time the builder loads.

Cause
Preface this with this being Claude’s summary, not my own. Looks to be right though.

  • The preview outputs the modal’s content as a %%{children(‘id’)}%% placeholder and mounts the child elements straight into the closed .x-modal-content. The iframe is live in the DOM from load, so the browser loads it and it autoplays.

  • Dynamic Rendering doesn’t help in the builder. The cs_tag_content filter in includes/classes/Services/Rivet.php returns early when it sees the children placeholder, so nothing is wrapped in the rvt-template. The offscreen-reset handler in the app bundle then finds no template and bails out.

  • Off Canvas and Dropdown share the same mechanism.

Suggested fix (by Claude)
In the preview, always defer mounting the children of an offscreen dropzone (Modal, Off Canvas, Dropdown) until its toggleable opens (tco-toggle, state true), and unmount them after the close transition. Do this regardless of the Dynamic Rendering setting, since the builder has no need to keep closed content alive. The preview already tracks which elements are _offscreen and already opens toggles on create and select. This needs no per-provider logic and covers every iframe embed (YouTube, Vimeo, Wistia, Loom and others), <video autoplay> / <audio autoplay>, the Video element’s Player type with autoplay, Lottie and Raw Content.

Let me know if you have any questions or need any further information.

#2

Hey Seth,

Thank you for the detailed report and the clear reproduction steps. I understand that in the Cornerstone builder, an autoplaying video placed inside a closed Modal (and likewise Off Canvas or Dropdown) starts playing as soon as the builder loads.

We have reproduced this on Pro 6.9.6 / Cornerstone 7.9.6. In the builder preview, a Modal containing a Video element (Embed type, YouTube iframe with autoplay=1) loaded the video about 1.4 seconds after the preview loaded, with the modal closed. The video played through to the end without the modal ever being opened. This happened with Dynamic Rendering turned on, and your analysis is correct: in the builder, the modal’s content is mounted straight into the closed modal rather than being held back until it opens, so the Dynamic Rendering setting is not applied there. The live site is not affected. With Dynamic Rendering on, the same modal’s content is not loaded on the front end until the modal is opened.

  1. Keep Dynamic Rendering enabled on the live site – Select the Modal (or Off Canvas / Dropdown) and make sure Dynamic Rendering is on. This prevents autoplaying videos from loading or playing for visitors until the modal is opened. Without it, iframe embeds are present on the page from load and will autoplay on the front end as well.

  2. Workaround while editing – Until a fix is released, remove autoplay=1 from the embed URL while you work on the page in the builder, and add it back before you finish. This stops the video from playing in the background each time the builder loads.

  3. Bug report to our developers – We have passed this issue to our development team with your reproduction steps, and your suggestion to defer closed toggleable content in the builder until it is opened. We cannot give a release date, but please keep an eye on the changelog for a fix.

Best Regards.