Lauch a youtube video on enter viewport

1

Hi :slight_smile:
Is it possible to launch autoplay youtube video on enter viewport (using interaction panel perhaps ?)

2

Hi Chris,
You can use an Enter viewport interaction with the JavaScript function action and trigger the YouTube iframe API/custom JS from there. There isn’t a dedicated “play video” interaction action at the moment.

Add this to Bricks » Settings » Custom Code » Body Footer Scripts (or to the page’s custom code / a code element below the video element):

<script>
window.brxPlayYoutubeOnEnterView = function (brx) {
  const source = brx?.source || brx?.sourceEl || brx?.el || brx
  const root = source instanceof Element ? source : document

  const iframe =
    root.matches?.('iframe') ? root : root.querySelector('iframe, [data-src], [data-iframe-src]')

  if (!iframe) {
    return
  }

  let src =
    iframe.getAttribute('src') ||
    iframe.getAttribute('data-src') ||
    iframe.getAttribute('data-iframe-src')

  if (!src || !src.includes('youtube')) {
    return
  }

  const url = new URL(src, window.location.href)

  url.searchParams.set('autoplay', '1')
  url.searchParams.set('mute', '0')
  url.searchParams.set('playsinline', '1')
  url.searchParams.set('enablejsapi', '1')

  src = url.toString()

  if (iframe.tagName === 'IFRAME') {
    iframe.setAttribute('src', src)

    iframe.contentWindow?.postMessage(
      JSON.stringify({
        event: 'command',
        func: 'playVideo',
        args: []
      }),
      '*'
    )
  } else {
    iframe.setAttribute('data-iframe-src', src)
    iframe.click()
  }
}
</script>

Set the interaction like this (it’s directly on the video element in my screenshot, but you can also add it to, e.g., a section):

CleanShot 2026-06-03 at 14.20.13@2x
CleanShot 2026-06-03 at 14.20.13@2x750Ă—1938 132 KB

Best regards,
timmse

3

hi Timmse, i’m trying it, many thanks :slight_smile:

4

i allowed code execution, added the code on footer script section, setted the interraction on the video on the page but it didnt start :frowning:

6

ok, seems to work correctly on others browsers than firefox !

Many Thanks Timmse :slight_smile:

7

That’s most likely due to the mute parameter, which is currently set to 0, so the video plays with sound (Chrome has no problem with it, Firefox does). If you change it from 0 to 1, it should play in Firefox too, but without sound…

url.searchParams.set('mute', '1')

Unfortunately, these are browser-specific limitations that are difficult, if not impossible, to resolve.

1 Like