diff --git a/CHANGELOG.md b/CHANGELOG.md
index 69089c6..ae898e5 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,11 +5,18 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [Unreleased]
+
+### Changed
+
+- `<VideoPlayer>` component now is eager by default (the lazy version is available via `import VideoPlayer from 'react-datocms/video-player/lazy';`)
+
 ## [2.0.1] - 2022-01-05
 
 ### Added
 
 - `layout` property to Image component
+
 ### Changed
 
 - Default layout is now `intrinsic`, so the image the image will scale the dimensions down for smaller viewports, but maintain the original dimensions for larger viewports
diff --git a/docs/video-player.md b/docs/video-player.md
index deb79a7..8da2de5 100644
--- a/docs/video-player.md
+++ b/docs/video-player.md
@@ -7,6 +7,7 @@
   - [Usage](#usage)
   - [Example](#example)
   - [Props](#props)
+  - [Lazy version](#lazy-version)
   - [Advanced usage: the `useVideoPlayer` hook](#advanced-usage-the-usevideoplayer-hook)
     - [Example](#example-1)
 
@@ -21,9 +22,9 @@ To stream videos, DatoCMS partners with MUX, a video CDN that serves optimized s
 ## Out-of-the-box features
 
 - Offers optimized streaming so smartphones and tablets don’t request desktop-sized videos
-- Lazy loads the video component and the video to be played to speed initial page load and save bandwidth
 - Holds the video position and size so your page doesn’t jump while the player loads
 - Uses blur-up technique to show a placeholder of the video while it loads
+- Optionally lazy loads the video component and the video to be played to speed initial page load and save bandwidth
 
 ## Installation
 
@@ -31,8 +32,6 @@ To stream videos, DatoCMS partners with MUX, a video CDN that serves optimized s
 npm install --save react-datocms @mux/mux-player-react
 ```
 
-`@mux/mux-player-react` is a [peer dependency](https://docs.npmjs.com/cli/v10/configuring-npm/package-json#peerdependencies) for `react-datocms`: so you're expected to add it in your project.
-
 ## Usage
 
 1. Import `VideoPlayer` from `react-datocms` and use it in your app
@@ -110,6 +109,23 @@ Compared to the `<MuxPlayer />`, **some prop default values are different** on `
 
 All the other props are forwarded to the `<MuxPlayer />` component that is used internally.
 
+## Lazy version
+
+For an optimized bundle, we provide a lazy version too. To use it, you need to change
+the way to import the component. From:
+
+```js
+import { VideoPlayer } from 'react-datocms';
+````
+
+to:
+
+```js
+import VideoPlayer from 'react-datocms/video-player/lazy';
+```
+
+The lazy version is based on `React.lazy()` method.
+
 ## Advanced usage: the `useVideoPlayer` hook
 
 Even though we try our best to make the `<VideoPlayer />` suitable and easy to use for most normal use cases, there are situations where you may need to leverage the `<MuxPlayer />` directly (let's suppose you wrote your special wrapper component around the `<MuxPlayer />` and you need a bunch of props to pass). If that's the case, fill free to use the hook we provide: `useVideoPlayer`.
diff --git a/examples/package-lock.json b/examples/package-lock.json
index 401af9f..04bbdaf 100644
--- a/examples/package-lock.json
+++ b/examples/package-lock.json
@@ -19,9 +19,10 @@
       }
     },
     "node_modules/@0no-co/graphql.web": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/@0no-co/graphql.web/-/graphql.web-1.0.6.tgz",
-      "integrity": "sha512-KZ7TnwMcQJcFgzjoY623AVxtlDQonkqp3rSz0wb15/jHPyU1v5gynUibEpuutDeoyGJ5Tp+FwxjGyDGDwq3vIw==",
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/@0no-co/graphql.web/-/graphql.web-1.0.9.tgz",
+      "integrity": "sha512-lXSg4bDHvP8CiMdpQf9f/rca12IIjXHN/p0Rc5mgzgLe4JBlIoA1zFa9NKhfG1bW0OyI2hgaOldFCfkEQwZuEQ==",
+      "license": "MIT",
       "peerDependencies": {
         "graphql": "^14.0.0 || ^15.0.0 || ^16.0.0"
       },
@@ -3789,33 +3790,37 @@
       "integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A=="
     },
     "node_modules/@mux/mux-player": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/@mux/mux-player/-/mux-player-2.4.1.tgz",
-      "integrity": "sha512-Lm7KkG/lD1tqqqtL1nacZsCll9JY4gVNGxUw/MPYmgIevYACYtQ/76iaEtaN67DmHYYxep1QUpYEDZPXallkEg==",
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@mux/mux-player/-/mux-player-3.0.0.tgz",
+      "integrity": "sha512-ZdJGSQ+uoh1A5quo7p6pQXRO7zh9hxcbAaRf21aOZHW7rWEF/SP5hp6ruRGZe5Za2EGVrVbMQpGUpfWSBFBLZA==",
+      "license": "MIT",
       "dependencies": {
-        "@mux/mux-video": "0.17.5",
-        "@mux/playback-core": "0.22.4",
-        "media-chrome": "~3.1.1"
+        "@mux/mux-video": "0.21.0",
+        "@mux/playback-core": "0.26.0",
+        "media-chrome": "~4.1.1",
+        "player.style": "^0.0.8"
       }
     },
     "node_modules/@mux/mux-video": {
-      "version": "0.17.5",
-      "resolved": "https://registry.npmjs.org/@mux/mux-video/-/mux-video-0.17.5.tgz",
-      "integrity": "sha512-EMLflDnr/o7XQiWKfwnq9BJmj30kpSszzXwpXE4hmBIgc9JAuF3Hl94qv1kyWQAUhrO5hnnOxwGHgv0FvkJ1GQ==",
+      "version": "0.21.0",
+      "resolved": "https://registry.npmjs.org/@mux/mux-video/-/mux-video-0.21.0.tgz",
+      "integrity": "sha512-/NUIJBYBAOd5P3oyN8bpUGShuUbVOE+y70MP5De8SqMj2mKG0WuY75biuU8ormoI5Jv474Ps7PWPA/MHyg44TA==",
+      "license": "MIT",
       "dependencies": {
-        "@mux/playback-core": "0.22.4",
-        "castable-video": "~1.0.6",
-        "custom-media-element": "~1.2.3",
-        "media-tracks": "~0.3.0"
+        "@mux/playback-core": "0.26.0",
+        "castable-video": "~1.1.0",
+        "custom-media-element": "~1.3.1",
+        "media-tracks": "~0.3.2"
       }
     },
     "node_modules/@mux/playback-core": {
-      "version": "0.22.4",
-      "resolved": "https://registry.npmjs.org/@mux/playback-core/-/playback-core-0.22.4.tgz",
-      "integrity": "sha512-f/jWcYbFRjXjdFRNq3MK79D1YHTqvwcfchRLYukE384P3cb027dru+bSxMKESrfkhAhnWFy7fdq/llawl7SU9g==",
+      "version": "0.26.0",
+      "resolved": "https://registry.npmjs.org/@mux/playback-core/-/playback-core-0.26.0.tgz",
+      "integrity": "sha512-Q2M+g6gAC8dwX62YGWiK6R+IT5gc3ArgQ0rI13SY6na3bKcbx8oL/tKRSi2iTnBhl0dcZrlezuVUCN6PE87nNQ==",
+      "license": "MIT",
       "dependencies": {
-        "hls.js": "~1.4.13",
-        "mux-embed": "~4.30.0"
+        "hls.js": "~1.5.11",
+        "mux-embed": "^5.3.0"
       }
     },
     "node_modules/@nicolo-ribaudo/eslint-scope-5-internals": {
@@ -5274,7 +5279,8 @@
     "node_modules/array-flatten": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-3.0.0.tgz",
-      "integrity": "sha512-zPMVc3ZYlGLNk4mpK1NzP2wg0ml9t7fUgDsayR5Y5rSzxQilzR9FGu/EH2jQOcKSAeAfWeylyW8juy3OkWRvNA=="
+      "integrity": "sha512-zPMVc3ZYlGLNk4mpK1NzP2wg0ml9t7fUgDsayR5Y5rSzxQilzR9FGu/EH2jQOcKSAeAfWeylyW8juy3OkWRvNA==",
+      "license": "MIT"
     },
     "node_modules/array-includes": {
       "version": "3.1.7",
@@ -6082,9 +6088,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001579",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001579.tgz",
-      "integrity": "sha512-u5AUVkixruKHJjw/pj9wISlcMpgFWzSrczLZbrqBSxukQixmg0SJ5sZTpvaFvxU0HoQKd4yoyAogyrAz9pzJnA==",
+      "version": "1.0.30001669",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001669.tgz",
+      "integrity": "sha512-DlWzFDJqstqtIVx1zeSpIMLjunf5SmwOw0N2Ck/QSQdS8PLS4+9HrLaYei4w8BIAL7IB/UEDu889d8vhCTPA0w==",
       "funding": [
         {
           "type": "opencollective",
@@ -6098,7 +6104,8 @@
           "type": "github",
           "url": "https://github.com/sponsors/ai"
         }
-      ]
+      ],
+      "license": "CC-BY-4.0"
     },
     "node_modules/case-sensitive-paths-webpack-plugin": {
       "version": "2.4.0",
@@ -6109,11 +6116,12 @@
       }
     },
     "node_modules/castable-video": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/castable-video/-/castable-video-1.0.6.tgz",
-      "integrity": "sha512-Ykw2uL4ZQnqX0j9KF9ksbDpyc8I53mFMswCKW9yV5TrwpWkdNqRHLlcU85W30BIw61fgDjgm0Xh5G0rbcmv23g==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/castable-video/-/castable-video-1.1.0.tgz",
+      "integrity": "sha512-64/roq+vieXz8aOEvSs5bohHRym1fxhvHQMZXPn8/s8z0oi7XD5B67fnt9gFyCsfzH8RnuYJ0PxMSYjbMPHOtw==",
+      "license": "MIT",
       "dependencies": {
-        "custom-media-element": "~1.2.2"
+        "custom-media-element": "~1.3.2"
       }
     },
     "node_modules/chalk": {
@@ -6912,9 +6920,10 @@
       "integrity": "sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg=="
     },
     "node_modules/custom-media-element": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/custom-media-element/-/custom-media-element-1.2.3.tgz",
-      "integrity": "sha512-xr9Hbrslkjm1fapJP5hL98pySeZmNepBSefQS/XTxynamqPTfRBK5MnhReMOiAj8xvJApVPrVnlYxIrknay8jg=="
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/custom-media-element/-/custom-media-element-1.3.2.tgz",
+      "integrity": "sha512-nDyMobZgoAVqz7mA8rsn7i1/6bjH6N9ab2Ge7LyyNxrvxAq7zQJPg8i3u2VH7wEB+Y1T1+C3/h1G774/D+ZLag==",
+      "license": "MIT"
     },
     "node_modules/damerau-levenshtein": {
       "version": "1.0.8",
@@ -6938,22 +6947,25 @@
       "version": "0.1.15",
       "resolved": "https://registry.npmjs.org/datocms-listen/-/datocms-listen-0.1.15.tgz",
       "integrity": "sha512-0LcdKYW/ilWdyrRzQ+YbkAk4r2dge63vzHtfv19L8pfbfYurQgXP9/ck703QZL//YqBoc0OKBS4BP4WUQ6JDKA==",
+      "license": "MIT",
       "dependencies": {
         "@0no-co/graphql.web": "^1.0.1"
       }
     },
     "node_modules/datocms-structured-text-generic-html-renderer": {
-      "version": "2.1.12",
-      "resolved": "https://registry.npmjs.org/datocms-structured-text-generic-html-renderer/-/datocms-structured-text-generic-html-renderer-2.1.12.tgz",
-      "integrity": "sha512-1Vj/24iaKUcNm3xG9kD09EHz00rIVIQVD6RSGNBvi+BQPPJGdGfFUcPME9xQv3KZrcw/pyNkAkBXO2q4wqEslw==",
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/datocms-structured-text-generic-html-renderer/-/datocms-structured-text-generic-html-renderer-4.0.1.tgz",
+      "integrity": "sha512-umEWXyBHP3fo1YsOL7AhFxWrmb2LNxiRV26+C8NMkwoBZ/RbF9+dBaGIBv1D/NeasCjq560hBdm7jqChxxIi/A==",
+      "license": "MIT",
       "dependencies": {
-        "datocms-structured-text-utils": "^2.1.12"
+        "datocms-structured-text-utils": "^4.0.1"
       }
     },
     "node_modules/datocms-structured-text-utils": {
-      "version": "2.1.12",
-      "resolved": "https://registry.npmjs.org/datocms-structured-text-utils/-/datocms-structured-text-utils-2.1.12.tgz",
-      "integrity": "sha512-tZtiPN/sEjl+4Z6igojPdap6Miy0Z6VO6Afor3vcyY/8PIwKVGbTsdd5trD+skWPCPRZVNzKpfYoAVziXWTL8Q==",
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/datocms-structured-text-utils/-/datocms-structured-text-utils-4.0.1.tgz",
+      "integrity": "sha512-2rK4bZfzKpdKw2AZhnnD043QkGOUaJDOUGPrQHo5w4hvU4jTBGGxoaTg4KIb3Q5Yo+XUFvreb+U0+86xdh7I+Q==",
+      "license": "MIT",
       "dependencies": {
         "array-flatten": "^3.0.0"
       }
@@ -9177,9 +9189,10 @@
       }
     },
     "node_modules/hls.js": {
-      "version": "1.4.14",
-      "resolved": "https://registry.npmjs.org/hls.js/-/hls.js-1.4.14.tgz",
-      "integrity": "sha512-UppQjyvPVclg+6t2KY/Rv03h0+bA5u6zwqVoz4LAC/L0fgYmIaCD7ZCrwe8WI1Gv01be1XL0QFsRbSdIHV/Wbw=="
+      "version": "1.5.17",
+      "resolved": "https://registry.npmjs.org/hls.js/-/hls.js-1.5.17.tgz",
+      "integrity": "sha512-wA66nnYFvQa1o4DO/BFgLNRKnBTVXpNeldGRBJ2Y0SvFtdwvFKCbqa9zhHoZLoxHhZ+jYsj3aIBkWQQCPNOhMw==",
+      "license": "Apache-2.0"
     },
     "node_modules/hoopy": {
       "version": "0.1.4",
@@ -13491,14 +13504,16 @@
       "integrity": "sha512-iV3XNKw06j5Q7mi6h+9vbx23Tv7JkjEVgKHW4pimwyDGWm0OIQntJJ+u1C6mg6mK1EaTv42XQ7w76yuzH7M2cA=="
     },
     "node_modules/media-chrome": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/media-chrome/-/media-chrome-3.1.1.tgz",
-      "integrity": "sha512-EqofPNX7Eq1dv9ixuRo51Wv/Wo3P4PIPjY4iM1jGqu/Jyond8BqdigQKdhxPM2rH9SohdUXZvUWS1OJ1xMO6Ww=="
+      "version": "4.1.5",
+      "resolved": "https://registry.npmjs.org/media-chrome/-/media-chrome-4.1.5.tgz",
+      "integrity": "sha512-wfUUREB+IoDQwB0GAYgCz0aLWiUAJpqEQaMMqAJvf6CX2sUKev8kC6TXuMsH4zj8TgyODD+Uj1FZP2RBtl2vUg==",
+      "license": "MIT"
     },
     "node_modules/media-tracks": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/media-tracks/-/media-tracks-0.3.0.tgz",
-      "integrity": "sha512-kicD8eOFwe6nD7jn7iM/0yuLzWuo6abWHURYwY7NhxL1dBif+lt0on4rLTs6VhKwAEE/BjT3wr+0vn1w8SBpag=="
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/media-tracks/-/media-tracks-0.3.3.tgz",
+      "integrity": "sha512-9P2FuUHnZZ3iji+2RQk7Zkh5AmZTnOG5fODACnjhCVveX1McY3jmCRHofIEI+yTBqplz7LXy48c7fQ3Uigp88w==",
+      "license": "MIT"
     },
     "node_modules/media-typer": {
       "version": "0.3.0",
@@ -13723,9 +13738,10 @@
       }
     },
     "node_modules/mux-embed": {
-      "version": "4.30.0",
-      "resolved": "https://registry.npmjs.org/mux-embed/-/mux-embed-4.30.0.tgz",
-      "integrity": "sha512-XAgAp4CEvsiZL26GbruzeG1g33OWyrzuskDMavXUxDufTxS0/AxAhwoTTRqEzEJS9vnZa/X9R2GV3xRX1XMp2w=="
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/mux-embed/-/mux-embed-5.3.3.tgz",
+      "integrity": "sha512-jG+nECEsCQMzXWUkHI4+XfK856AwQPkjxpfi5Rnmc36k8YzjHGxy1GdQcDJpgNHJpz1HoL4Xdrz1bqBZ7t9NCQ==",
+      "license": "MIT"
     },
     "node_modules/mz": {
       "version": "2.7.0",
@@ -14406,6 +14422,22 @@
         "node": ">=4"
       }
     },
+    "node_modules/player.style": {
+      "version": "0.0.8",
+      "resolved": "https://registry.npmjs.org/player.style/-/player.style-0.0.8.tgz",
+      "integrity": "sha512-ScmFzio3634eEn+ejpkEw13F5xYvnPghtaZz/Kg7QQP78ECrxdjRVqwVPZhUwbYxmg5OIScByOgHfrHpzTtR1Q==",
+      "license": "MIT",
+      "workspaces": [
+        ".",
+        "site",
+        "examples/*",
+        "scripts/*",
+        "themes/*"
+      ],
+      "dependencies": {
+        "media-chrome": "^4.1.0"
+      }
+    },
     "node_modules/postcss": {
       "version": "8.4.33",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.33.tgz",
@@ -15892,15 +15924,15 @@
       "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
     },
     "node_modules/react-datocms": {
-      "version": "5.0.3",
+      "version": "7.0.3",
       "resolved": "file:../react-datocms.tgz",
-      "integrity": "sha512-2JoO/u01t274aYSJ/VzSc5zQgORGFknpU1Bo9mewnrD1HxjtVMpGtlX8ON9zMxX0VDwuIaQsA9ckSOkOXZ6WJA==",
+      "integrity": "sha512-+8h4VXx15ODF3MOZI+AR6DzKUMONBnEPOgyOjaIuWOqBxLo6w8G42hA1Sz3v7ek9dVX7amo3BI6IS8I2uhakew==",
       "license": "MIT",
       "dependencies": {
         "@mux/mux-player-react": "*",
         "datocms-listen": "^0.1.9",
-        "datocms-structured-text-generic-html-renderer": "^2.0.1",
-        "datocms-structured-text-utils": "^2.0.1",
+        "datocms-structured-text-generic-html-renderer": "^4.0.1",
+        "datocms-structured-text-utils": "^4.0.1",
         "react-intersection-observer": "^9.4.3",
         "react-string-replace": "^1.1.0",
         "use-deep-compare-effect": "^1.6.1"
@@ -15913,18 +15945,19 @@
       }
     },
     "node_modules/react-datocms/node_modules/@mux/mux-player-react": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/@mux/mux-player-react/-/mux-player-react-2.4.1.tgz",
-      "integrity": "sha512-grM6T847fKnzlK786NG1AxhNS+6A78pEPc5zG4yYvKe3ayGNTOpq/Hnm9pDVkOx5/uMI/yCdSsfiNyytYaw8qA==",
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@mux/mux-player-react/-/mux-player-react-3.0.0.tgz",
+      "integrity": "sha512-W6NCgZ7Syh67HdsPFZGLtw98y9L/et4efqdVaYzgK5vJOMWFhEetLkal49LyoskhhyrFlPgZWsTTBcTQf+YJdg==",
+      "license": "MIT",
       "dependencies": {
-        "@mux/mux-player": "2.4.1",
-        "@mux/playback-core": "0.22.4",
+        "@mux/mux-player": "3.0.0",
+        "@mux/playback-core": "0.26.0",
         "prop-types": "^15.7.2"
       },
       "peerDependencies": {
-        "@types/react": "^17.0.0 || ^18",
-        "react": "^17.0.2 || ^18",
-        "react-dom": "^17.0.2 || ^18"
+        "@types/react": "^17.0.0 || ^18 || ^19",
+        "react": "^17.0.2 || ^18 || ^19",
+        "react-dom": "^17.0.2 || ^18 || ^19"
       },
       "peerDependenciesMeta": {
         "@types/react": {
@@ -15936,12 +15969,13 @@
       }
     },
     "node_modules/react-datocms/node_modules/react-intersection-observer": {
-      "version": "9.8.1",
-      "resolved": "https://registry.npmjs.org/react-intersection-observer/-/react-intersection-observer-9.8.1.tgz",
-      "integrity": "sha512-QzOFdROX8D8MH3wE3OVKH0f3mLjKTtEN1VX/rkNuECCff+aKky0pIjulDhr3Ewqj5el/L+MhBkM3ef0Tbt+qUQ==",
+      "version": "9.13.1",
+      "resolved": "https://registry.npmjs.org/react-intersection-observer/-/react-intersection-observer-9.13.1.tgz",
+      "integrity": "sha512-tSzDaTy0qwNPLJHg8XZhlyHTgGW6drFKTtvjdL+p6um12rcnp8Z5XstE+QNBJ7c64n5o0Lj4ilUleA41bmDoMw==",
+      "license": "MIT",
       "peerDependencies": {
-        "react": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0",
-        "react-dom": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
+        "react": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
       },
       "peerDependenciesMeta": {
         "react-dom": {
@@ -16241,6 +16275,7 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/react-string-replace/-/react-string-replace-1.1.1.tgz",
       "integrity": "sha512-26TUbLzLfHQ5jO5N7y3Mx88eeKo0Ml0UjCQuX4BMfOd/JX+enQqlKpL1CZnmjeBRvQE8TR+ds9j1rqx9CxhKHQ==",
+      "license": "MIT",
       "engines": {
         "node": ">=0.12.0"
       }
@@ -18327,6 +18362,7 @@
       "version": "1.8.1",
       "resolved": "https://registry.npmjs.org/use-deep-compare-effect/-/use-deep-compare-effect-1.8.1.tgz",
       "integrity": "sha512-kbeNVZ9Zkc0RFGpfMN3MNfaKNvcLNyxOAAd9O4CBZ+kCBXXscn9s/4I+8ytUER4RDpEYs5+O6Rs4PqiZ+rHr5Q==",
+      "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.12.5",
         "dequal": "^2.0.2"
diff --git a/examples/src/App/index.jsx b/examples/src/App/index.jsx
index 0dfa42c..0b2ee74 100644
--- a/examples/src/App/index.jsx
+++ b/examples/src/App/index.jsx
@@ -3,6 +3,7 @@ import QuerySubscriptionExample from '../QuerySubscriptionExample';
 import SRCImageExamples from '../SRCImageExample';
 import SiteSearchExamples from '../SiteSearchExamples';
 import VideoExamples from '../VideoExamples';
+import LazyVideoExamples from '../LazyVideoExamples';
 import './style.css';
 
 export default function App() {
@@ -14,27 +15,26 @@ export default function App() {
         <a href="#subscriptions">Query Subscription</a>
         <a href="#site-search">Site Search</a>
         <a href="#video">Video</a>
+        <a href="#lazy-video">Lazy Video</a>
       </nav>
 
-      <a id="native-image" />
-      <h1>SRCImage examples</h1>
+      <h1 id="native-image">SRCImage examples</h1>
       <SRCImageExamples />
 
-      <a id="image" />
-      <h1>Image examples</h1>
+      <h1 id="image">Image examples</h1>
       <ImageExamples />
 
-      <a id="subscriptions" />
-      <h1>Query subscription example</h1>
+      <h1 id="subscriptions">Query subscription example</h1>
       <QuerySubscriptionExample />
 
-      <a id="site-search" />
-      <h1>Site Search example</h1>
+      <h1 id="site-search">Site Search example</h1>
       <SiteSearchExamples />
 
-      <a id="video" />
-      <h1>Video examples</h1>
+      <h1 id="video">Video examples</h1>
       <VideoExamples />
+
+      <h1 id="lazy-video">Lazy Video examples</h1>
+      <LazyVideoExamples />
     </>
   );
 }
diff --git a/examples/src/LazyVideoExamples/index.jsx b/examples/src/LazyVideoExamples/index.jsx
new file mode 100644
index 0000000..a8833be
--- /dev/null
+++ b/examples/src/LazyVideoExamples/index.jsx
@@ -0,0 +1,24 @@
+import { useRef } from 'react';
+
+import VideoPlayer from 'react-datocms/video-player/lazy';
+
+const data = {
+  muxPlaybackId: 'ip028MAXF026dU900bKiyNDttjonw7A1dFY',
+  title: 'Title',
+  width: 1080,
+  height: 1920,
+  blurUpThumb:
+    'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHBwgHBgoICAgLDhAWDhYQDg0NDhUVFg0OFxUZGBYfFiEaHysjHR0oHRUWJDUlKC0vMjIyGSI4PTcwPCsxMi8BCgsLDg0OEA4QEC8dFhwvLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vLy8vL//AABEIABkADgMBIgACEQEDEQH/xAAYAAEAAwEAAAAAAAAAAAAAAAADBAUGAf/EABwQAAICAgMAAAAAAAAAAAAAAAEDAAIEEQUGIf/EABUBAQEAAAAAAAAAAAAAAAAAAAIB/8QAGBEAAgMAAAAAAAAAAAAAAAAAAAIBITH/2gAMAwEAAhEDEQA/AByuKdRJlXTiXWJkfI7bkOprUJPYnAHcSzQXizNl9teCCXuB8EWckUjaf//Z',
+};
+
+export default function Video() {
+  const ref = useRef();
+
+  return (
+    <>
+      <div className="example" data-title="Standard behaviour">
+        <VideoPlayer data={data} className="video-player" ref={ref} />
+      </div>
+    </>
+  );
+}
diff --git a/examples/src/QuerySubscriptionExample/index.js b/examples/src/QuerySubscriptionExample/index.jsx
similarity index 75%
rename from examples/src/QuerySubscriptionExample/index.js
rename to examples/src/QuerySubscriptionExample/index.jsx
index 95fef3d..0546be4 100644
--- a/examples/src/QuerySubscriptionExample/index.js
+++ b/examples/src/QuerySubscriptionExample/index.jsx
@@ -3,9 +3,9 @@ import {
   StructuredText,
   renderMetaTags,
   useQuerySubscription,
-} from 'react-datocms';
-import { Helmet } from 'react-helmet';
-import './style.css';
+} from "react-datocms";
+import { Helmet } from "react-helmet";
+import "./style.css";
 
 const RESPONSIVE_IMAGE_FRAGMENT = `
   aspectRatio
@@ -66,22 +66,22 @@ export default function QuerySubscriptionExample() {
   const { status, error, data } = useQuerySubscription({
     query,
     variables: { first: 4 },
-    token: 'faeb9172e232a75339242faafb9e56de8c8f13b735f7090964',
+    token: "faeb9172e232a75339242faafb9e56de8c8f13b735f7090964",
   });
 
   const metaTags = data ? [...data.page.seo, ...data.site.favicon] : [];
 
   const statusMessage = {
-    connecting: 'Connecting to DatoCMS...',
-    connected: 'Connected to DatoCMS, receiving live updates!',
-    closed: 'Connection closed',
+    connecting: "Connecting to DatoCMS...",
+    connected: "Connected to DatoCMS, receiving live updates!",
+    closed: "Connection closed",
   };
 
   return (
     <div className="example" data-title="Full-blown example">
       <Helmet>{renderMetaTags(metaTags)}</Helmet>
       <div className="status">
-        {status === 'connected' && <div className="connected-badge" />}
+        {status === "connected" && <div className="connected-badge" />}
         {statusMessage[status]}
       </div>
       {error && (
@@ -96,10 +96,13 @@ export default function QuerySubscriptionExample() {
       <div className="blogPosts">
         {data?.blogPosts.map((blogPost) => (
           <article key={blogPost.id} className="blogPost">
-            <Image
-              className="blogPost-image"
-              data={blogPost.coverImage.responsiveImage}
-            />
+            {blogPost.coverImage?.responsiveImage && (
+              <Image
+                className="blogPost-image"
+                data={blogPost.coverImage.responsiveImage}
+              />
+            )}
+
             <div className="blogPost-content">
               <h6 className="blogPost-title">
                 <a
@@ -114,10 +117,12 @@ export default function QuerySubscriptionExample() {
                 <StructuredText data={blogPost.excerpt} />
               </div>
               <footer className="blogPost-author">
-                <Image
-                  className="blogPost-author-image"
-                  data={blogPost.author.avatar.responsiveImage}
-                />
+                {blogPost.author?.avatar?.responsiveImage && (
+                  <Image
+                    className="blogPost-author-image"
+                    data={blogPost.author.avatar.responsiveImage}
+                  />
+                )}
                 Written by {blogPost.author.name}
               </footer>
             </div>
diff --git a/package.json b/package.json
index 461f2db..21c5216 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,11 @@
       "import": "./dist/esm/Image/index.js",
       "types": "./dist/types/Image/index.d.ts"
     },
+    "./video-player/lazy": {
+      "require": "./dist/cjs/VideoPlayer/lazy.js",
+      "import": "./dist/esm/VideoPlayer/lazy.js",
+      "types": "./dist/types/VideoPlayer/lazy.d.ts"
+    },
     "./video-player": {
       "require": "./dist/cjs/VideoPlayer/index.js",
       "import": "./dist/esm/VideoPlayer/index.js",
@@ -64,6 +69,9 @@
       "video-player": [
         "./dist/types/VideoPlayer/index.d.ts"
       ],
+      "video-player/lazy": [
+        "./dist/types/VideoPlayer/lazy.d.ts"
+      ],
       "structured-text": [
         "./dist/types/StructuredText/index.d.ts"
       ],
diff --git a/src/VideoPlayer/index.tsx b/src/VideoPlayer/index.tsx
index fa89c29..975dd45 100644
--- a/src/VideoPlayer/index.tsx
+++ b/src/VideoPlayer/index.tsx
@@ -1,4 +1,4 @@
-'use client';
+"use client";
 
 // This file defines a React component that easily displays a video player using
 // data stored on DatoCMS and retrieved via DatoCMS GraphQL API. The component
@@ -8,25 +8,24 @@
 //
 // [1]: https://www.mux.com/player
 
-import React, { forwardRef } from 'react';
+import React, { forwardRef } from "react";
 
 // We use and extend Typescript types defined in the MUX player.
 
-import type MuxPlayerElement from '@mux/mux-player';
-import type { MuxPlayerProps } from '@mux/mux-player-react';
+import type MuxPlayerElement from "@mux/mux-player";
+import type { MuxPlayerProps } from "@mux/mux-player-react";
 
 // React MUX player is made available in two flavours: eager and lazy loaded. We
-// choose to use the lazy version to avoid loading the web component uselessly.
-// MUX player lazy version loads internally the eager version using
-// `React.lazy()`.
+// choose to use the eager loading version as the default approch, but
+// we also provide a lazy loading version..
 
-import MuxPlayer from '@mux/mux-player-react/lazy';
+import MuxPlayer from "@mux/mux-player-react";
 
 // The core of this component is the `useVideoPlayer` hook: it takes
 // data from DatoCMS GraphQL API and returns props as expected by the
 // `<MuxPlayer />` component.
 
-import { useVideoPlayer } from '../useVideoPlayer/index.js';
+import { useVideoPlayer } from "../useVideoPlayer/index.js";
 
 type Maybe<T> = T | null;
 type Possibly<T> = Maybe<T> | undefined;
@@ -63,16 +62,18 @@ export type VideoPlayerProps = MuxPlayerProps & {
   data?: Video;
 };
 
-export const VideoPlayer: (
-  props: VideoPlayerProps,
-) => ReturnType<typeof MuxPlayer> = forwardRef<
+type VideoPlayerType = React.ForwardRefExoticComponent<
+  VideoPlayerProps & React.RefAttributes<MuxPlayerElement>
+>;
+
+export const VideoPlayer: VideoPlayerType = forwardRef<
   MuxPlayerElement,
   VideoPlayerProps
->((props, ref) => {
+>((props: VideoPlayerProps, ref) => {
   const {
     data = {},
     disableCookies = true,
-    preload = 'metadata',
+    preload = "metadata",
     style: styleFromProps,
     ...rest
   } = props;
@@ -105,3 +106,5 @@ export const VideoPlayer: (
     />
   );
 });
+
+export default VideoPlayer;
diff --git a/src/VideoPlayer/lazy.tsx b/src/VideoPlayer/lazy.tsx
new file mode 100644
index 0000000..25d8910
--- /dev/null
+++ b/src/VideoPlayer/lazy.tsx
@@ -0,0 +1,26 @@
+import React, { Suspense, forwardRef } from "react";
+import type MuxPlayerElement from "@mux/mux-player";
+import type MuxPlayer from "@mux/mux-player-react/.";
+
+import type { VideoPlayerProps } from "./index";
+
+const LazyLoadedVideoPlayer = React.lazy(() => import("./index.js"));
+
+type VideoPlayerType = React.ForwardRefExoticComponent<
+  VideoPlayerProps & React.RefAttributes<MuxPlayerElement>
+>;
+
+export const VideoPlayer: VideoPlayerType = forwardRef<
+  MuxPlayerElement,
+  VideoPlayerProps
+>((props: VideoPlayerProps, ref) => {
+  const { className, style } = props;
+
+  return (
+    <Suspense fallback={<div className={className} style={style} />}>
+      <LazyLoadedVideoPlayer {...props} ref={ref} />
+    </Suspense>
+  );
+});
+
+export default VideoPlayer;
diff --git a/tsconfig.json b/tsconfig.json
index 74dc997..9386421 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -29,6 +29,8 @@
     // TypeScript and JavaScript Compatibility
     "target": "ES2016",
 
+    "module": "ESNext",
+
     // Module resolution
     "moduleResolution": "Node",
     "esModuleInterop": true,