Hopefully this helps with a Youtube iframe lazy load! You can find me on Twitter if you have any questions. This could also be used for any oembed item. import = useIntersectionObserver(containerRef)Īnd there you are! A fully deferred iframe component to house YouTube videos. Using the hook is as simple as importing it from the package, and plugging it in. The thing I love most about hooks is that they are generally broken down into a single use, super easy to use function. Any web page that uses the IFrame API must also implement the following JavaScript function: onYouTubeIframeAPIReady The API will call this function when the. Not wanting to re-invent the wheel I decided to use the useIntersectionObserver() hook provided by Jared Lunde from his brilliant React Hook package. I initially considered building out the whole intersection observer functionality myself, but when digging a bit deeper I found that there were a number of polyfills and other magic needed to support edge cases. The Intersection Observer API is often used to lazy load images, but it can also be used to load all manner of other things. The load event which we will listen to is fired when the page has loaded, including all dependent resources such as stylesheets and images. React Iframe Examples and Templates Use this online react-iframe playground to view and fork react-iframe example apps and templates on CodeSandbox. There is also react-frame-component, a package that imho offers pretty much everything you need when working with controlled
0 Comments
Leave a Reply. |