how integrate Video

[severe marsh]

<script src="https://fast.wistia.com/player.js" async></script><script src="https://fast.wistia.com/embed/ajtj2xpipw.js" async type="module"></script><style>wistia-player[media-id='ajtj2xpipw']:not(:defined) { background: center / contain no-repeat url('https://fast.wistia.com/embed/medias/ajtj2xpipw/swatch'); display: block; filter: blur(5px); padding-top:56.25%; }</style> <wistia-player media-id="ajtj2xpipw" wistia-popover="true"></wistia-player>

How integrate this video script on qwik best way ???

[severe marsh]

import {
  component$,
  useStyles$,
  useVisibleTask$,
  useSignal,
  $,
} from '@builder.io/qwik'
import styles from './video.css?inline'
import {wrapper} from './container.css'
export default component$(() => {

  const open = useSignal<boolean>(false)

  useVisibleTask$(() => {
    if (!document.querySelector('script[src*="wistia.com/player.js"]')) {
      const script = document.createElement('script')
      script.src = 'https://fast.wistia.com/player.js'
      script.async = true
      document.head.appendChild(script)
    }
  })

  useStyles$(styles)
  const toggleOpen = $(() => {
    open.value = true
  })

  return (
    <div
      onClick$={toggleOpen}
      class={open.value ? wrapper.open : wrapper.closed}>
      {open.value && <wistia-player media-id="ajtj2xpipw" />}
    </div>
  )
})

Do you have better idea ?

[unique spindle]

Hmm, their docs say that you should use the E-v1 script https://docs.wistia.com/docs/all-about-e-v1

Anyway, you can check for typeof Wistia !== 'undefined'

Also, this won't work on SSR. Your player could be as simple as

import { component$ } from '@builder.io/qwik';

export default component$(() => {
  return <div>
    <script async src="https://fast.wistia.com/assets/external/E-v1.js" />
    <wistia-player media-id="ajtj2xpipw" />
  </div>;
});

Don't worry about having the script tag multiple times, it will only download it once and the overhead is minimal

also, I'd just hide the player instead of not rendering it. That way it will be fast when opened.

oh and you really don't have to put toggleOpen in a separate variable, just onClick$={() => open.value = true} is fine

https://qwik.dev/playground/#f=Q0o0Rqa0STTI1bA6JIjVNZESE6hdAXFXcXJRZgGstCguSrZVgtUYaYnFJXrlwJI7M1EPaIk%2BsMmRWlKsD0z5qUXAslPfVbfMUC%2BrWAnmYRuIWt0CYBEFLAdyU1OAnMwUW6XErJIso4qCzIJyqFpIu2Y0AQ%2FVBAwA

Here it is with a toggle and a load callback https://qwik.dev/playground/#f=7VZLDoIwEL0KdgGSQInGhFXdeQMv0EDBEpSGNmJCuLtTCm1N3LkyYTkw7XR%2B7z1vaE55%2Fm1oEse%2BSaD3%2BPcx8ok5MkWP4uU7UMsNEJW4qPuKtpLp%2F%2Bv4aSViMjFaxFHwaILoKzAsKEAvCXbOms7Xrq5bZkXMfMvouYeh1w1Z9FwoW9EZxawl%2B4KgldEqKhUegFk4xZByBpKIKZnBZrIeUsgu6fOAG4ns6e6h8cc%2B%2BKMirUamMoqnxds10URIBQAvoNudlWDwkiDaqOb4ElwMaPWGJuvzRrZt%2B%2Fmv%2B%2FkG

(@severe marsh )

[severe marsh]

It's just that I wanted to trick lighthouse and load js only when clicking or hovering the div

[unique spindle]

That's what the second example shows

[severe marsh]

thank you @unique spindle is it or would be a good idea to download the content of https://fast.wistia.com/assets/external/E-v1.js in my /lib directory ?

I guess using the link give me always the latest version

thank you it look great on my website https://mellifluous-puppy-d98a72.netlify.app/

[unique spindle]

No they explicitly say not to do that 🙂

[severe marsh]

great didn't see

Whiy not using useRessource ?

to fetch the link ?