How to preload or detect when a CDN hosted video is loaded for above the fold in Gatsby?

Question

Looking to implement a 16:9 video under the navigation and above the fold in my index.js but I'm trying to figure out how to preload the video before rendering the page. In my research I've read Working with Video that shows how to implement with an iframe:

import React from "react"
const Video = ({ videoSrcURL, videoTitle, ...props }) => (
  <div className="video">
    <iframe
      src={videoSrcURL}
      title={videoTitle}
      allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
      frameBorder="0"
      webkitallowfullscreen="true"
      mozallowfullscreen="true"
      allowFullScreen
    />
  </div>
)
export default Video

It's mentioned for best results to use a CDN and there is a Vimeo plugin gatsby-source-vimeo-all:

import React from 'react'
import { graphql, useStaticQuery } from 'gatsby'

const query = graphql`
  {
    vimeo(link: { eq: "https://vimeo.com/315401283/dfd80bf8c1" }) {
      name
      description
      duration
      link
      aspectRatio
      width
      height
      srcset {
        ...GatsbyVimeoSrcSet
      }
      pictures {
        uri
      }
      user {
        name
      }
    }
  }
`

const Video = () => {
  const { vimeo } = useStaticQuery(query)
  return <video src={vimeo.srcset[0].link} controls autoPlay loop />
}

export default Video

I'm already eliminating the video for smaller devices with a React component that detects browser size. My thinking is to use gatsby-browser.js to implement with accessing the location data location.pathname but I'm not finding any docs on how this should be done. When I research for preloading video I've read:

Gatsby research:

In Gatsby how should a video be handled for the index.js located above the fold or is there a way in Gatsby to detect when the iframe is loaded so I could use a conditional render?

Ferran Buireu · Answer 1 · 2022-03-23T06:11:00.280

is there a way in Gatsby to detect when the iframe is loaded so I could use a conditional render?

Indeed there is, and I think this will be the easiest and most native solution, using the onLoad event.

<iframe
  src={videoSrcURL}
  title={videoTitle}
  allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
  frameBorder="0"
  webkitallowfullscreen="true"
  mozallowfullscreen="true"
  allowFullScreen
  onLoad={someOnLoadFunction}
/>

In this case, you can use someOnLoadFunction to conditional render.

Overall, I'm not sure if this solution is what you are looking for because there's no way to preload (or lazy-load) an iframe without requesting it by the browser. However, depending on your specs, you can try using the loading property which is not fully supported but maybe what you are looking for along with the onLoad event callback.

<iframe
  src={videoSrcURL}
  title={videoTitle}
  allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
  frameBorder="0"
  webkitallowfullscreen="true"
  mozallowfullscreen="true"
  allowFullScreen
  onLoad={someOnLoadFunction}
  loading="lazy"
/>

How to preload or detect when a CDN hosted video is loaded for above the fold in Gatsby?

1 Answers1