Lazy-load CldVideoPlayer on click to avoid loading cld-video-player.min.js on every page visit

Author: nucliweb

components/LazyVideoPlayer.js

@@ -0,0 +1,60 @@
+import { useState } from 'react'
+import { CldVideoPlayer } from 'next-cloudinary'
+
+export function LazyVideoPlayer({ src, width, height, poster }) {
+  const [playing, setPlaying] = useState(false)
+
+  if (playing) {
+    return <CldVideoPlayer width={width} height={height} src={src} autoPlay="always" />
+  }
+
+  return (
+    <div
+      onClick={() => setPlaying(true)}
+      style={{
+        position: 'relative',
+        cursor: 'pointer',
+        background: '#000',
+        aspectRatio: `${width} / ${height}`,
+        overflow: 'hidden',
+      }}
+    >
+      {poster && (
+        <img
+          src={poster}
+          alt="Video tutorial preview"
+          width={width}
+          height={height}
+          loading="lazy"
+          style={{ width: '100%', height: 'auto', display: 'block' }}
+        />
+      )}
+      <div
+        style={{
+          position: 'absolute',
+          inset: 0,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        <div
+          style={{
+            width: '64px',
+            height: '64px',
+            background: 'rgba(0, 0, 0, 0.65)',
+            borderRadius: '50%',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            fontSize: '24px',
+            color: '#fff',
+            userSelect: 'none',
+          }}
+        >
+          ▶
+        </div>
+      </div>
+    </div>
+  )
+}

pages/index.mdx

@@ -1,4 +1,4 @@
-import { CldVideoPlayer } from "next-cloudinary";
+import { LazyVideoPlayer } from "../components/LazyVideoPlayer";
 
 # WebPerf Snippets
 
@@ -76,10 +76,11 @@ Save frequently used snippets for quick access:
 ### Video tutorial
 
 <div style={{ marginTop: "20px", display: "block" }}>
-  <CldVideoPlayer
+  <LazyVideoPlayer
     width="1920"
     height="1080"
     src="webperf-snippets/devtools-new-snippet"
+    poster="https://res.cloudinary.com/nucliweb/video/upload/so_auto,f_jpg,q_auto/webperf-snippets/devtools-new-snippet.jpg"
   />
 </div>