diff --git a/.stackblitz/app.vue b/.stackblitz/app.vue
index 709a3fc..a32f2ea 100644
--- a/.stackblitz/app.vue
+++ b/.stackblitz/app.vue
@@ -1,44 +1,46 @@
 <script lang="ts" setup>
 // Usage of `useCldImageUrl` composable
-const { url } = useCldImageUrl({ options: { src: '/cld-sample-5.jpg' } })
-console.log(url)
+const { url } = useCldImageUrl({ options: { src: "/cld-sample-5.jpg" } });
+console.log(url);
+
+const { url: videoUrl } = useCldVideoUrl({
+  options: { src: "videos/mountain-stars" },
+});
+console.log(videoUrl);
+
+const mediaAssets = [
+  { tag: "electric_car_product_gallery_demo" }, // by default mediaType: "image"
+  { tag: "electric_car_product_gallery_demo", mediaType: "video" },
+  { tag: "electric_car_360_product_gallery_demo", mediaType: "spin" },
+];
+
+const buttonId = "open-btn";
 </script>
 
 <template>
   <!-- Usage of `CldImage.vue` component -->
-  <CldImage
-    src="cld-sample-5"
-    width="987"
-    height="987"
-    alt="Sample Product"
-  />
+  <CldImage src="cld-sample-5" width="987" height="987" alt="Sample Product" />
   <CldVideoPlayer
     width="1620"
     height="1080"
     src="videos/mountain-stars"
+    picture-in-picture-toggle
   />
   <!-- Usage of `CldUploadWidget.vue` component -->
-  <CldUploadWidget
-    v-slot="{ open }"
-    upload-preset="nuxt-cloudinary-unsigned"
-  >
-    <button
-      type="button"
-      @click="open"
-    >
-      Upload an Image
-    </button>
+  <CldUploadWidget v-slot="{ open }" upload-preset="nuxt-cloudinary-unsigned">
+    <button type="button" @click="open">Upload an Image</button>
   </CldUploadWidget>
   <!-- Usage of `CldUploadButton.vue` component -->
-  <CldUploadButton
-    upload-preset="nuxt-cloudinary-unsigned"
-  >
+  <CldUploadButton upload-preset="nuxt-cloudinary-unsigned">
     Upload
   </CldUploadButton>
   <p>CldOgImage is here. Inspect the html meta to see the result</p>
   <CldOgImage
     src="cld-sample-2"
     twitter-title="test"
+    width="300"
+    height="300"
+    alt="test"
   />
   <CldImage
     src="cld-sample-5"
@@ -49,7 +51,7 @@ console.log(url)
       {
         position: {
           gravity: 'north',
-          y: 60
+          y: 60,
         },
         text: {
           color: 'rgb:52a4ff80',
@@ -61,12 +63,12 @@ console.log(url)
           lineSpacing: -100,
           stroke: true,
           border: '20px_solid_rgb:2d0eff99',
-        }
+        },
       },
       {
         position: {
           gravity: 'south',
-          y: 60
+          y: 60,
         },
         text: {
           color: 'rgb:52a4ff80',
@@ -78,8 +80,20 @@ console.log(url)
           lineSpacing: -100,
           stroke: true,
           border: '20px_solid_rgb:2d0eff99',
-        }
-      }
+        },
+      },
     ]"
   />
+
+  <button :id="buttonId">Select Image or Video</button>
+  <CldMediaLibrary
+    api-key="12345"
+    :button-id="buttonId"
+    style="height: 600px"
+  />
+  <CldProductGallery
+    :media-assets="mediaAssets"
+    cloud-name="demo"
+    :button-id="buttonId"
+  />
 </template>
diff --git a/.stackblitz/package.json b/.stackblitz/package.json
index 5a594f1..3b86eb6 100644
--- a/.stackblitz/package.json
+++ b/.stackblitz/package.json
@@ -11,6 +11,6 @@
     "nuxt": "^3.8.0"
   },
   "dependencies": {
-    "@nuxtjs/cloudinary": "^2.6.0"
+    "@nuxtjs/cloudinary": "^2.7.2"
   }
 }
diff --git a/.stackblitz/yarn.lock b/.stackblitz/yarn.lock
index 9f90e5d..8293822 100644
--- a/.stackblitz/yarn.lock
+++ b/.stackblitz/yarn.lock
@@ -484,10 +484,15 @@
   dependencies:
     mime "^3.0.0"
 
-"@cloudinary-util/url-loader@^4.2.0":
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/@cloudinary-util/url-loader/-/url-loader-4.2.0.tgz#8d686666b5214db1daefd392a115e8a708f968d7"
-  integrity sha512-fpCFqFPAN/f9Gt//25qLXNDYwy5EcOudRzDPOrsEBH6aMwEdFaJuPxvLiP0IP5MCihKji/XDr9QJQ9Wa+amNSA==
+"@cloudinary-util/types@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@cloudinary-util/types/-/types-1.0.1.tgz#1bbfc0cffaf5d543e13f9dd4864a9aebc6496394"
+  integrity sha512-aj/m3Sn5RSYKk6dAZJcjerKfVNrcCyL6v6pcDl4aNpQ3zSWMOvnIrzCidE9paaw1r+ZWonjNnhkA0anLdwRRfA==
+
+"@cloudinary-util/url-loader@^5.2.1":
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/@cloudinary-util/url-loader/-/url-loader-5.2.1.tgz#d663520b1dbf924d5d319dfc7819f27e4c5acb22"
+  integrity sha512-1GDPCnRYSGlnPqEdcvH/1h0puAYoF9tJazV/zNx3ptCN0PbwBWEw+ksZm6mCQF2cr9ofDE3B+C5YdPLLsvbuQQ==
   dependencies:
     "@cloudinary-util/util" "3.0.0"
     "@cloudinary/url-gen" "1.15.0"
@@ -1168,12 +1173,13 @@
     vite-plugin-checker "^0.6.2"
     vue-bundle-renderer "^2.0.0"
 
-"@nuxtjs/cloudinary@^2.6.0":
-  version "2.6.0"
-  resolved "https://registry.yarnpkg.com/@nuxtjs/cloudinary/-/cloudinary-2.6.0.tgz#ab27227e6877bef97ff1f3e7b34947f0e9942034"
-  integrity sha512-SU18YU0WUgLVECzjpMudfI5h2nVSlY73CPwKxR4p3TCX7lKzrXX02G7i7FDp7yZtOHD2a17UbFdD6a+KsKAetA==
+"@nuxtjs/cloudinary@^2.7.2":
+  version "2.7.2"
+  resolved "https://registry.yarnpkg.com/@nuxtjs/cloudinary/-/cloudinary-2.7.2.tgz#74110eee3b7e4de159ae81baafa1437cfc5d2a6f"
+  integrity sha512-BreBrTM54X5PT7i7BiB9/VuFM4eKV7UhseKSgIRjCuWbf4AR2wCvXJV/FvW6ReYFx2JylhwWLbNWIcq9wT9FOA==
   dependencies:
-    "@cloudinary-util/url-loader" "^4.2.0"
+    "@cloudinary-util/types" "1.0.1"
+    "@cloudinary-util/url-loader" "^5.2.1"
     "@nuxt/kit" "^3.5.0"
     "@unpic/vue" "^0.0.42"
     defu "^6.1.2"
diff --git a/docs/package.json b/docs/package.json
index cdf2266..a9cb07f 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -17,6 +17,6 @@
     "typescript": "^5.3.3"
   },
   "dependencies": {
-    "@nuxtjs/cloudinary": "^2.6.0"
+    "@nuxtjs/cloudinary": "^2.7.2"
   }
 }
diff --git a/docs/pnpm-lock.yaml b/docs/pnpm-lock.yaml
index 8dc6155..1a71961 100644
--- a/docs/pnpm-lock.yaml
+++ b/docs/pnpm-lock.yaml
@@ -9,8 +9,8 @@ importers:
   .:
     dependencies:
       '@nuxtjs/cloudinary':
-        specifier: ^2.6.0
-        version: 2.6.0(typescript@5.3.3)
+        specifier: ^2.7.2
+        version: 2.7.2(typescript@5.3.3)
     devDependencies:
       '@iconify-json/ph':
         specifier: ^1.1.10
@@ -378,8 +378,12 @@ packages:
       mime: 3.0.0
     dev: true
 
-  /@cloudinary-util/url-loader@4.2.0:
-    resolution: {integrity: sha512-fpCFqFPAN/f9Gt//25qLXNDYwy5EcOudRzDPOrsEBH6aMwEdFaJuPxvLiP0IP5MCihKji/XDr9QJQ9Wa+amNSA==}
+  /@cloudinary-util/types@1.0.1:
+    resolution: {integrity: sha512-aj/m3Sn5RSYKk6dAZJcjerKfVNrcCyL6v6pcDl4aNpQ3zSWMOvnIrzCidE9paaw1r+ZWonjNnhkA0anLdwRRfA==}
+    dev: false
+
+  /@cloudinary-util/url-loader@5.2.1:
+    resolution: {integrity: sha512-1GDPCnRYSGlnPqEdcvH/1h0puAYoF9tJazV/zNx3ptCN0PbwBWEw+ksZm6mCQF2cr9ofDE3B+C5YdPLLsvbuQQ==}
     dependencies:
       '@cloudinary-util/util': 3.0.0
       '@cloudinary/url-gen': 1.15.0
@@ -1212,7 +1216,7 @@ packages:
       nuxt: ^3.8.2
       vite: '*'
     dependencies:
-      '@nuxt/kit': 3.9.0
+      '@nuxt/kit': 3.9.3
       '@nuxt/schema': 3.9.0
       execa: 7.2.0
       nuxt: 3.9.3(typescript@5.3.3)(vite@5.0.11)
@@ -1648,10 +1652,11 @@ packages:
       - vue-tsc
     dev: true
 
-  /@nuxtjs/cloudinary@2.6.0(typescript@5.3.3):
-    resolution: {integrity: sha512-SU18YU0WUgLVECzjpMudfI5h2nVSlY73CPwKxR4p3TCX7lKzrXX02G7i7FDp7yZtOHD2a17UbFdD6a+KsKAetA==}
+  /@nuxtjs/cloudinary@2.7.2(typescript@5.3.3):
+    resolution: {integrity: sha512-BreBrTM54X5PT7i7BiB9/VuFM4eKV7UhseKSgIRjCuWbf4AR2wCvXJV/FvW6ReYFx2JylhwWLbNWIcq9wT9FOA==}
     dependencies:
-      '@cloudinary-util/url-loader': 4.2.0
+      '@cloudinary-util/types': 1.0.1
+      '@cloudinary-util/url-loader': 5.2.1
       '@nuxt/kit': 3.9.3
       '@unpic/vue': 0.0.42(typescript@5.3.3)
       defu: 6.1.4
@@ -1664,7 +1669,7 @@ packages:
   /@nuxtjs/color-mode@3.3.2:
     resolution: {integrity: sha512-BLpBfrYZngV2QWFQ4HNEFwAXa3Pno43Ge+2XHcZJTTa1Z4KzRLvOwku8yiyV3ovIaaXKGwduBdv3Z5Ocdp0/+g==}
     dependencies:
-      '@nuxt/kit': 3.9.0
+      '@nuxt/kit': 3.9.3
       lodash.template: 4.5.0
       pathe: 1.1.1
     transitivePeerDependencies:
@@ -1714,13 +1719,13 @@ packages:
   /@nuxtjs/tailwindcss@6.10.1:
     resolution: {integrity: sha512-LqOWiKUpCYErQoVTA7HN6QkjOBVGC24AmfgO/csQHRsRp8Bvw7rW+85fZ1cWY4KqlY0Rvx6pwZuOTcyiH31Orw==}
     dependencies:
-      '@nuxt/kit': 3.9.0
+      '@nuxt/kit': 3.9.3
       autoprefixer: 10.4.16(postcss@8.4.32)
       chokidar: 3.5.3
       clear-module: 4.1.2
       colorette: 2.0.20
       cookie-es: 1.0.0
-      defu: 6.1.3
+      defu: 6.1.4
       destr: 2.0.2
       h3: 1.9.0
       iron-webcrypto: 1.0.0
@@ -4200,7 +4205,7 @@ packages:
     hasBin: true
     dependencies:
       colorette: 2.0.20
-      defu: 6.1.3
+      defu: 6.1.4
       https-proxy-agent: 7.0.2
       mri: 1.2.0
       node-fetch-native: 1.4.1
@@ -6167,7 +6172,7 @@ packages:
       '@iconify/collections': 1.0.368
       '@iconify/vue': 4.1.1(vue@3.4.15)
       '@nuxt/devtools-kit': 1.0.6(nuxt@3.9.3)(vite@5.0.11)
-      '@nuxt/kit': 3.9.0
+      '@nuxt/kit': 3.9.3
     transitivePeerDependencies:
       - nuxt
       - rollup
diff --git a/package.json b/package.json
index 400e8e7..16cc95d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nuxtjs/cloudinary",
-  "version": "2.6.0",
+  "version": "2.7.2",
   "description": "Cloudinary module for Nuxt",
   "license": "MIT",
   "type": "module",
diff --git a/src/runtime/components/CldProductGallery.vue b/src/runtime/components/CldProductGallery.vue
index 0f9a2d8..4f2d631 100644
--- a/src/runtime/components/CldProductGallery.vue
+++ b/src/runtime/components/CldProductGallery.vue
@@ -10,12 +10,12 @@ type MediaType = "image" | "video" | "spin";
 type ProductGalleryProps = {
   cloudName?: string;
   mediaAssets: {
-    tage: string;
+    tag: string;
     mediaType?: MediaType;
   }[];
   displayProps?: {
     mode: string;
-    columns: number
+    columns: number;
   }[];
   aspectRatio?: string;
   imageBreakpoint?: number;
@@ -29,8 +29,8 @@ type ProductGalleryProps = {
   transition?: string;
   zoom?: boolean;
   // Other params listed https://cloudinary.com/documentation/product_gallery_reference#widget_parameters
-  params?: Record<string, any>
-}
+  params?: Record<string, any>;
+};
 
 const props = defineProps<ProductGalleryProps>();
 
diff --git a/src/runtime/components/CldVideoPlayer.vue b/src/runtime/components/CldVideoPlayer.vue
index 24caf8a..112c4df 100644
--- a/src/runtime/components/CldVideoPlayer.vue
+++ b/src/runtime/components/CldVideoPlayer.vue
@@ -71,7 +71,7 @@ export type CldVideoPlayerProps = Pick<
   quality?: string | number;
   width: string | number;
   config?: ConfigOptions;
-  pictureInPictureToggle: boolean;
+  pictureInPictureToggle?: boolean;
 };
 
 const props = withDefaults(defineProps<CldVideoPlayerProps>(), {