chore: 3.0.0-rc.4 and docs fix

Author: Baroshem

.stackblitz/package.json

@@ -11,6 +11,6 @@
     "nuxt": "^3.11.2"
   },
   "dependencies": {
-    "@nuxtjs/cloudinary": "^3.0.0-rc.3"
+    "@nuxtjs/cloudinary": "^3.0.0-rc.4"
   }
 }

.stackblitz/yarn.lock

@@ -1169,10 +1169,10 @@
     vite-plugin-checker "^0.6.4"
     vue-bundle-renderer "^2.0.0"
 
-"@nuxtjs/cloudinary@^3.0.0-rc.3":
-  version "3.0.0-rc.3"
-  resolved "https://registry.yarnpkg.com/@nuxtjs/cloudinary/-/cloudinary-3.0.0-rc.3.tgz#360bd36f96630d79fe80dde35b923401c1e80046"
-  integrity sha512-ZkiMwb8dpFLf9aYEtBZlqjpabw3mrlb2SaJ/8blzMHMgxCz9/ExEjV1IJ70qkNJ2LkeUJdebt+uBE1PL51yObg==
+"@nuxtjs/cloudinary@^3.0.0-rc.4":
+  version "3.0.0-rc.4"
+  resolved "https://registry.yarnpkg.com/@nuxtjs/cloudinary/-/cloudinary-3.0.0-rc.4.tgz#1349ce2d7aae9b1281ba3dedc4538d0b51a8a2c7"
+  integrity sha512-MR9Nth1u65u31W0Ia0C4lPJpdHRvtHQ9d0ETKnEg7xNNrYE/TL5C5Pollp9EJwGO1eqtyLnU6Blj2gB2Qjh/BA==
   dependencies:
     "@cloudinary-util/types" "1.0.2"
     "@cloudinary-util/url-loader" "^5.3.1"

docs/components/content/ColoredVideoPlayer.vue

@@ -1,5 +1,6 @@
 <template>
   <CldVideoPlayer
+    id="2"
     width="1620"
     height="1080"
     src="videos/mountain-stars"

docs/components/content/VideoPlayerWithChapters.vue

@@ -8,6 +8,7 @@ const chapters = {
 
 <template>
   <CldVideoPlayer
+    id="5"
     width="1620"
     height="1080"
     src="videos/dog-running-snow"

docs/components/content/VideoPlayerWithEvents.vue

@@ -1,9 +1,12 @@
 <template>
   <CldVideoPlayer
+    id="3"
     width="1620"
     height="1080"
     src="videos/mountain-stars"
     font-face="Source Serif Pro"
-    :on-pause="({ player }) => console.log(`current time: ${player.currentTime()}`)"
+    :on-pause="
+      ({ player }) => console.log(`current time: ${player.currentTime()}`)
+    "
   />
 </template>

docs/content/2.components/CldVideoPlayer.md

@@ -14,7 +14,7 @@ The basic required props include `width`, `height`, and `src`:
 <CldVideoPlayer width="1920" height="1080" src="<Public ID>" />
 ```
 
-:cld-video-player{src="videos/mountain-stars" width="900" height="900" style="aspect-ratio: 1620 / 1080"}
+:cld-video-player{src="videos/mountain-stars" width="900" height="900" style="aspect-ratio: 1620 / 1080" id="1"}
 
 ## Customization
 
@@ -75,7 +75,7 @@ Picture-in-picture helps your viewers continue their multitasking agenda and mai
 />
 ```
 
-:cld-video-player{src="videos/mountain-stars" width="900" height="900" style="aspect-ratio: 1620 / 1080" pictureInPictureToggle}
+:cld-video-player{src="videos/mountain-stars" width="900" height="900" style="aspect-ratio: 1620 / 1080" pictureInPictureToggle id="4"}
 
 ## Chapters
 

docs/package.json

@@ -17,6 +17,6 @@
     "typescript": "^5.4.5"
   },
   "dependencies": {
-    "@nuxtjs/cloudinary": "^3.0.0-rc.3"
+    "@nuxtjs/cloudinary": "^3.0.0-rc.4"
   }
 }

docs/pnpm-lock.yaml

@@ -1,6 +1,6 @@
 {
   "name": "@nuxtjs/cloudinary",
-  "version": "3.0.0-rc.3",
+  "version": "3.0.0-rc.4",
   "description": "Cloudinary module for Nuxt",
   "license": "MIT",
   "type": "module",

package.json

@@ -216,7 +216,7 @@ defineExpose({
 useHead({
   script: [
     {
-      id: 'cloudinary-videoplayer',
+      id: `cloudinary-videoplayer-${playerId}`,
       src: `https://unpkg.com/cloudinary-video-player@${version}/dist/cld-video-player.min.js`,
       onload: handleOnLoad,
       onerror: e =>