{"id":25266,"date":"2022-10-19T07:30:00","date_gmt":"2022-10-19T14:30:00","guid":{"rendered":"https:\/\/cloudinary.com\/blog\/?p=25266"},"modified":"2025-09-29T15:25:18","modified_gmt":"2025-09-29T22:25:18","slug":"embed-the-cloudinary-video-player-within-the-product-gallery-widget-for-next-level-customization","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/embed-the-cloudinary-video-player-within-the-product-gallery-widget-for-next-level-customization","title":{"rendered":"Embed the Cloudinary Video Player within the Product Gallery Widget for Next-level Customization"},"content":{"rendered":"\n<p><\/p>\n\n\n<div class=\"wp-block-cloudinary-markdown \"><p>At Cloudinary, we make developers\u2019 lives easier by providing tools to help automate, manage and deliver media assets. The <a href=\"https:\/\/cloudinary.com\/documentation\/product_gallery\">Cloudinary Product Gallery<\/a> is an interactive and customizable user interface that you can easily add to any website with a few lines of code. The gallery can display a variety of different media types for showcasing your products. This includes offering an assortment of high quality images taken from a variety of angles, adding zoom functionality for focusing on small details, displaying videos showing the use of the products in their real environment, and even including interactive 360 spin and 3D object models of your product.<\/p>\n<p>The latest version of the Product Gallery widget now includes built-in support for the Cloudinary Video Player. This means all the videos played in the Product Gallery can also take advantage of the Video Player\u2019s many valuable customization and integration capabilities, and the fact that it is monetization and analytics-ready.<\/p>\n<p>Some of the features that the <a href=\"https:\/\/cloudinary.com\/documentation\/product_gallery#cloudinary_video_player\">Cloudinary Video Player<\/a> brings to the table include:<\/p>\n<ul>\n<li>Customizable: HTML5 video controls, the player\u2019s color schemes, playlists, and themes.<\/li>\n<li>Monetization: post Google Adsense or DoubleClick ads with banners.<\/li>\n<li>Support for numerous video formats and autoselection of the best format for the user\u2019s browser.<\/li>\n<li>Analytics: track user engagement by monitoring events that can be automatically sent directly to analysis systems such as Google Analytics.<\/li>\n<li>Ability to track video quality changes for adaptive bitrate streaming.<\/li>\n<li>Option to add subtitles and captions.<\/li>\n<li>Support for HTML5 <a href=\"https:\/\/cloudinary.com\/guides\/video\/how-can-you-use-responsive-video\">responsive video<\/a>.<\/li>\n<li>Support for HTML5 video live-streaming.<\/li>\n<\/ul>\n<div><\/div>\n<div id=\"my-gallery\" style=\"max-width:80%;margin:auto\">\n<\/div>\n<h2>Activating the Cloudinary Video Player<\/h2>\n<p>To use the Cloudinary Video Player within the Product Gallery, set the new <code>playerType<\/code> property of the <code>videoProps<\/code> parameter to \u2018cloudinary\u2019. This is a global setting for the Product Gallery and affects all videos played within the Product Gallery.\nFor example, to use the Cloudinary Video Player to play all the video assets:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">const<\/span> myGallery= cloudinary.galleryWidget({ \n  <span class=\"hljs-attr\">container<\/span>: <span class=\"hljs-string\">\"#my-gallery\"<\/span>, \n  <span class=\"hljs-attr\">cloudName<\/span>: <span class=\"hljs-string\">\"demo\"<\/span>, \n  <span class=\"hljs-attr\">mediaAssets<\/span>: &#91;\n    { <span class=\"hljs-attr\">publicId<\/span>: <span class=\"hljs-string\">\"dog\"<\/span>, <span class=\"hljs-attr\">mediaType<\/span>: <span class=\"hljs-string\">\"video\"<\/span> },\n    { <span class=\"hljs-attr\">publicId<\/span>: <span class=\"hljs-string\">\"cat\"<\/span>, <span class=\"hljs-attr\">mediaType<\/span>: <span class=\"hljs-string\">\"video\"<\/span> }\n  ],\n  <span class=\"hljs-attr\">videoProps<\/span>: { <span class=\"hljs-attr\">playerType<\/span>: <span class=\"hljs-string\">\"cloudinary\"<\/span> }  \n});\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<h2>Cloudinary Video Player Options<\/h2>\n<p>You will probably also want to configure and customize the Cloudinary Video Player for the Product Gallery widget by also including any of the <a href=\"https:\/\/cloudinary.com\/documentation\/video_player_api_reference#configuration_options\">Video Player configuration options<\/a> in the <code>videoProps<\/code> parameter. All the configuration options added to the <code>videoProps<\/code> parameter will affect all the videos played within the Product Gallery.<\/p>\n<p>For example, to show jump control buttons, allowing the user to skip forward or back 10 seconds, include the <code>showJumpControls<\/code> parameter set to \u2018true\u2019:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">const<\/span> myGallery = cloudinary.galleryWidget({ \n  <span class=\"hljs-attr\">container<\/span>: <span class=\"hljs-string\">\"#my-gallery\"<\/span>, \n  <span class=\"hljs-attr\">cloudName<\/span>: <span class=\"hljs-string\">\"demo\"<\/span>, \n  <span class=\"hljs-attr\">mediaAssets<\/span>: &#91;{ <span class=\"hljs-attr\">publicId<\/span>: <span class=\"hljs-string\">\"dog\"<\/span>, <span class=\"hljs-attr\">mediaType<\/span>: <span class=\"hljs-string\">\"video\"<\/span> }],\n  <span class=\"hljs-attr\">videoProps<\/span>: {\n    <span class=\"hljs-attr\">playerType<\/span>: <span class=\"hljs-string\">\"cloudinary\"<\/span>,\n    <span class=\"hljs-attr\">showJumpControls<\/span>: <span class=\"hljs-literal\">true<\/span>\n  }  \n});\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Now you can also take advantage of the source options available to the Cloudinary Video Player as we will see in the following section.<\/p>\n<h2>Cloudinary Video Player Source Options<\/h2>\n<p>It\u2019s also simple to configure the videos you include on an individual basis. The <code>videoProps<\/code> parameter described above represents the video player video configuration options that will apply to all videos played in the Product Gallery. To individually configure each of the videos (sources) you display within the Product Gallery you can include the new <code>videoPlayerSource<\/code> property which has been added to the <code>mediaAssets<\/code> parameter. The<code>videoPlayerSource<\/code> property accepts any of the <a href=\"https:\/\/cloudinary.com\/documentation\/video_player_api_reference#source\">Video Player source options<\/a>. For example, to configure adaptive streaming options for playing the \u201cdog\u201d video, with hls as the primary format and dash as a fallback option for browsers that don\u2019t support HLS:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">const<\/span> myGallery = cloudinary.galleryWidget({ \n  <span class=\"hljs-attr\">container<\/span>: <span class=\"hljs-string\">\"#my-gallery\"<\/span>, \n  <span class=\"hljs-attr\">cloudName<\/span>: <span class=\"hljs-string\">\"demo\"<\/span>, \n  <span class=\"hljs-attr\">mediaAssets<\/span>: &#91;{ \n    <span class=\"hljs-attr\">publicId<\/span>: <span class=\"hljs-string\">\"dog\"<\/span>, \n    <span class=\"hljs-attr\">mediaType<\/span>: <span class=\"hljs-string\">\"video\"<\/span>,\n    <span class=\"hljs-attr\">videoPlayerSource<\/span>: { \n      <span class=\"hljs-attr\">sourceTypes<\/span>: &#91;<span class=\"hljs-string\">\"hls\"<\/span>, <span class=\"hljs-string\">\"dash\"<\/span>], \n      <span class=\"hljs-attr\">sourceTransformation<\/span>: { \n        <span class=\"hljs-string\">\"hls\"<\/span>: &#91;{ <span class=\"hljs-attr\">streaming_profile<\/span>: <span class=\"hljs-string\">\"hd_hls\"<\/span> }], \n        <span class=\"hljs-string\">\"dash\"<\/span>: &#91;{ <span class=\"hljs-attr\">streaming_profile<\/span>: <span class=\"hljs-string\">\"hd_dash\"<\/span> }],\n      } \n    }\n  }],\n  <span class=\"hljs-attr\">videoProps<\/span>: {\n    <span class=\"hljs-attr\">playerType<\/span>: <span class=\"hljs-string\">\"cloudinary\"<\/span>\n  }  \n});\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<div class='c-callout  c-callout--inline-title c-callout--note'><strong class='c-callout__title'>Note:<\/strong> <p>The example above assumes that the streaming profiles and adaptive streaming format were already pre-generated with an eager transformation. For more details, see the <a href=\"https:\/\/cloudinary.com\/documentation\/video_player_hls_dash\">HLS and MPEG-DASH adaptive streaming<\/a> documentation.<\/p><\/div>\n<h2>Applying Transformations to Videos<\/h2>\n<p>There are now 2 ways to apply transformations to the videos in the Product Gallery.  The new <code>videoPlayerSource<\/code> property of the <code>mediaAssets<\/code> parameter is a much more powerful and feature rich alternative to the <code>transformation<\/code> property of the <code>mediaAssets<\/code> parameter.<\/p>\n<p>However, you can still use both methods to apply transformations to assets included in the gallery. The Product Gallery widget applies some default <a href=\"https:\/\/cloudinary.com\/documentation\/transformation_reference\">transformations<\/a> to video assets it displays. You can override any of these default transformations by adding the <code>transformation<\/code> property to the <code>mediaAssets<\/code> parameter.<\/p>\n<p>For example, to override the default duration of 30 seconds to now be 20 seconds:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css shcb-wrap-lines\"><span class=\"hljs-selector-tag\">mediaAssets<\/span>: <span class=\"hljs-selector-attr\">&#91;{ tag: <span class=\"hljs-string\">\"shirt\"<\/span>, transformation: { duration: 20 } }]<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>To add other transformation parameters, besides overriding defaults, you can use the <code>transformation<\/code> object of the <code>transformation<\/code> parameter. For example, to add images tagged with \u201cdog\u201d and also add an overlay of the \u2018cat\u2019 image in the top right corner:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">mediaAssets: &#91;{ <span class=\"hljs-attr\">tag<\/span>: <span class=\"hljs-string\">\"dog\"<\/span>, <span class=\"hljs-attr\">transformation<\/span>: \n  { <span class=\"hljs-attr\">transformation<\/span>: &#91;{ <span class=\"hljs-attr\">overlay<\/span>: <span class=\"hljs-string\">\"cat\"<\/span>, <span class=\"hljs-attr\">gravity<\/span>: <span class=\"hljs-string\">\"north_east\"<\/span> }]}}]\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Combining both methods, the transformations applied in the <code>videoPlayerSource<\/code> property will be chained to the transformations defined by the Product Gallery widget.\nFor example, to override the default 30 second duration and also apply an overlay:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-6\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">const<\/span> myGallery = cloudinary.galleryWidget({ \n  <span class=\"hljs-attr\">container<\/span>: <span class=\"hljs-string\">\"#my-gallery\"<\/span>, \n  <span class=\"hljs-attr\">cloudName<\/span>: <span class=\"hljs-string\">\"demo\"<\/span>, \n  <span class=\"hljs-attr\">mediaAssets<\/span>: &#91;{ \n    <span class=\"hljs-attr\">publicId<\/span>: <span class=\"hljs-string\">\"dog\"<\/span>, \n    <span class=\"hljs-attr\">mediaType<\/span>: <span class=\"hljs-string\">\"video\"<\/span>,\n    <span class=\"hljs-attr\">transformation<\/span>: { <span class=\"hljs-attr\">duration<\/span>: <span class=\"hljs-number\">20<\/span> }\n    <span class=\"hljs-attr\">videoPlayerSource<\/span>: { \n       <span class=\"hljs-attr\">transformation<\/span>: { <span class=\"hljs-attr\">overlay<\/span>: <span class=\"hljs-string\">\"cat\"<\/span>, <span class=\"hljs-attr\">gravity<\/span>: <span class=\"hljs-string\">\"north_east\"<\/span> }, \n    }\n  }],\n  <span class=\"hljs-attr\">videoProps<\/span>: {\n    <span class=\"hljs-attr\">playerType<\/span>: <span class=\"hljs-string\">\"cloudinary\"<\/span>\n  }  \n});\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-6\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<h2>Summary &#8211; Widget in a Widget<\/h2>\n<p>The Product Gallery now supports using the Cloudinary Video Player to play all the videos, adding valuable customization and integration capabilities, analytics and monetization. For more details, see the <a href=\"https:\/\/cloudinary.com\/documentation\/product_gallery#cloudinary_video_player\">Product Gallery widget documentation<\/a>. All widget, image transformation and delivery features discussed here are available with no extra charge for all Cloudinary\u2019s plans, including the <a href=\"https:\/\/cloudinary.com\/users\/register\/free\">free plan<\/a>.<\/p>\n<\/div>\n\n<div class=\"wp-block-cloudinary-markdown \"><\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":50,"featured_media":25550,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[303,305,310],"class_list":["post-25266","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-video","tag-video-api","tag-video-player"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.6 (Yoast SEO v26.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Embed the Cloudinary Video Player within the Product Gallery Widget<\/title>\n<meta name=\"description\" content=\"How to use the Cloudinary Video Player to play all your videos in the Product Gallery Widget.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudinary.com\/blog\/embed-the-cloudinary-video-player-within-the-product-gallery-widget-for-next-level-customization\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Embed the Cloudinary Video Player within the Product Gallery Widget for Next-level Customization\" \/>\n<meta property=\"og:description\" content=\"How to use the Cloudinary Video Player to play all your videos in the Product Gallery Widget.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/embed-the-cloudinary-video-player-within-the-product-gallery-widget-for-next-level-customization\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-10-19T14:30:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-09-29T22:25:18+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1665510433\/Cld_Blog_FeatImg_Oct2k22_Cld-Video-Player-Gllry\/Cld_Blog_FeatImg_Oct2k22_Cld-Video-Player-Gllry.png?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"2000\" \/>\n\t<meta property=\"og:image:height\" content=\"1100\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"meirfeinberg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/embed-the-cloudinary-video-player-within-the-product-gallery-widget-for-next-level-customization#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/embed-the-cloudinary-video-player-within-the-product-gallery-widget-for-next-level-customization\"},\"author\":{\"name\":\"meirfeinberg\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/6e4a9c1be3c3f51710bd6171022a384d\"},\"headline\":\"Embed the Cloudinary Video Player within the Product Gallery Widget for Next-level Customization\",\"datePublished\":\"2022-10-19T14:30:00+00:00\",\"dateModified\":\"2025-09-29T22:25:18+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/embed-the-cloudinary-video-player-within-the-product-gallery-widget-for-next-level-customization\"},\"wordCount\":13,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/embed-the-cloudinary-video-player-within-the-product-gallery-widget-for-next-level-customization#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1665510433\/Cld_Blog_FeatImg_Oct2k22_Cld-Video-Player-Gllry\/Cld_Blog_FeatImg_Oct2k22_Cld-Video-Player-Gllry.png?_i=AA\",\"keywords\":[\"Video\",\"Video API\",\"Video Player\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2022\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/embed-the-cloudinary-video-player-within-the-product-gallery-widget-for-next-level-customization\",\"url\":\"https:\/\/cloudinary.com\/blog\/embed-the-cloudinary-video-player-within-the-product-gallery-widget-for-next-level-customization\",\"name\":\"Embed the Cloudinary Video Player within the Product Gallery Widget\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/embed-the-cloudinary-video-player-within-the-product-gallery-widget-for-next-level-customization#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/embed-the-cloudinary-video-player-within-the-product-gallery-widget-for-next-level-customization#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1665510433\/Cld_Blog_FeatImg_Oct2k22_Cld-Video-Player-Gllry\/Cld_Blog_FeatImg_Oct2k22_Cld-Video-Player-Gllry.png?_i=AA\",\"datePublished\":\"2022-10-19T14:30:00+00:00\",\"dateModified\":\"2025-09-29T22:25:18+00:00\",\"description\":\"How to use the Cloudinary Video Player to play all your videos in the Product Gallery Widget.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/embed-the-cloudinary-video-player-within-the-product-gallery-widget-for-next-level-customization#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/embed-the-cloudinary-video-player-within-the-product-gallery-widget-for-next-level-customization\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/embed-the-cloudinary-video-player-within-the-product-gallery-widget-for-next-level-customization#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1665510433\/Cld_Blog_FeatImg_Oct2k22_Cld-Video-Player-Gllry\/Cld_Blog_FeatImg_Oct2k22_Cld-Video-Player-Gllry.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1665510433\/Cld_Blog_FeatImg_Oct2k22_Cld-Video-Player-Gllry\/Cld_Blog_FeatImg_Oct2k22_Cld-Video-Player-Gllry.png?_i=AA\",\"width\":2000,\"height\":1100},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/embed-the-cloudinary-video-player-within-the-product-gallery-widget-for-next-level-customization#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Embed the Cloudinary Video Player within the Product Gallery Widget for Next-level Customization\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/6e4a9c1be3c3f51710bd6171022a384d\",\"name\":\"meirfeinberg\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/121cc23b13345b9eb98083b5f4b3ade7efdaff6adcebcfa417db501dda768844?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/121cc23b13345b9eb98083b5f4b3ade7efdaff6adcebcfa417db501dda768844?s=96&d=mm&r=g\",\"caption\":\"meirfeinberg\"}}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Embed the Cloudinary Video Player within the Product Gallery Widget","description":"How to use the Cloudinary Video Player to play all your videos in the Product Gallery Widget.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cloudinary.com\/blog\/embed-the-cloudinary-video-player-within-the-product-gallery-widget-for-next-level-customization","og_locale":"en_US","og_type":"article","og_title":"Embed the Cloudinary Video Player within the Product Gallery Widget for Next-level Customization","og_description":"How to use the Cloudinary Video Player to play all your videos in the Product Gallery Widget.","og_url":"https:\/\/cloudinary.com\/blog\/embed-the-cloudinary-video-player-within-the-product-gallery-widget-for-next-level-customization","og_site_name":"Cloudinary Blog","article_published_time":"2022-10-19T14:30:00+00:00","article_modified_time":"2025-09-29T22:25:18+00:00","og_image":[{"width":2000,"height":1100,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1665510433\/Cld_Blog_FeatImg_Oct2k22_Cld-Video-Player-Gllry\/Cld_Blog_FeatImg_Oct2k22_Cld-Video-Player-Gllry.png?_i=AA","type":"image\/png"}],"author":"meirfeinberg","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/embed-the-cloudinary-video-player-within-the-product-gallery-widget-for-next-level-customization#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/embed-the-cloudinary-video-player-within-the-product-gallery-widget-for-next-level-customization"},"author":{"name":"meirfeinberg","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/6e4a9c1be3c3f51710bd6171022a384d"},"headline":"Embed the Cloudinary Video Player within the Product Gallery Widget for Next-level Customization","datePublished":"2022-10-19T14:30:00+00:00","dateModified":"2025-09-29T22:25:18+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/embed-the-cloudinary-video-player-within-the-product-gallery-widget-for-next-level-customization"},"wordCount":13,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/embed-the-cloudinary-video-player-within-the-product-gallery-widget-for-next-level-customization#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1665510433\/Cld_Blog_FeatImg_Oct2k22_Cld-Video-Player-Gllry\/Cld_Blog_FeatImg_Oct2k22_Cld-Video-Player-Gllry.png?_i=AA","keywords":["Video","Video API","Video Player"],"inLanguage":"en-US","copyrightYear":"2022","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/embed-the-cloudinary-video-player-within-the-product-gallery-widget-for-next-level-customization","url":"https:\/\/cloudinary.com\/blog\/embed-the-cloudinary-video-player-within-the-product-gallery-widget-for-next-level-customization","name":"Embed the Cloudinary Video Player within the Product Gallery Widget","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/embed-the-cloudinary-video-player-within-the-product-gallery-widget-for-next-level-customization#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/embed-the-cloudinary-video-player-within-the-product-gallery-widget-for-next-level-customization#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1665510433\/Cld_Blog_FeatImg_Oct2k22_Cld-Video-Player-Gllry\/Cld_Blog_FeatImg_Oct2k22_Cld-Video-Player-Gllry.png?_i=AA","datePublished":"2022-10-19T14:30:00+00:00","dateModified":"2025-09-29T22:25:18+00:00","description":"How to use the Cloudinary Video Player to play all your videos in the Product Gallery Widget.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/embed-the-cloudinary-video-player-within-the-product-gallery-widget-for-next-level-customization#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/embed-the-cloudinary-video-player-within-the-product-gallery-widget-for-next-level-customization"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/embed-the-cloudinary-video-player-within-the-product-gallery-widget-for-next-level-customization#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1665510433\/Cld_Blog_FeatImg_Oct2k22_Cld-Video-Player-Gllry\/Cld_Blog_FeatImg_Oct2k22_Cld-Video-Player-Gllry.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1665510433\/Cld_Blog_FeatImg_Oct2k22_Cld-Video-Player-Gllry\/Cld_Blog_FeatImg_Oct2k22_Cld-Video-Player-Gllry.png?_i=AA","width":2000,"height":1100},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/embed-the-cloudinary-video-player-within-the-product-gallery-widget-for-next-level-customization#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Embed the Cloudinary Video Player within the Product Gallery Widget for Next-level Customization"}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/6e4a9c1be3c3f51710bd6171022a384d","name":"meirfeinberg","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/121cc23b13345b9eb98083b5f4b3ade7efdaff6adcebcfa417db501dda768844?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/121cc23b13345b9eb98083b5f4b3ade7efdaff6adcebcfa417db501dda768844?s=96&d=mm&r=g","caption":"meirfeinberg"}}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1665510433\/Cld_Blog_FeatImg_Oct2k22_Cld-Video-Player-Gllry\/Cld_Blog_FeatImg_Oct2k22_Cld-Video-Player-Gllry.png?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/25266","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/50"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=25266"}],"version-history":[{"count":50,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/25266\/revisions"}],"predecessor-version":[{"id":38655,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/25266\/revisions\/38655"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/25550"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=25266"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=25266"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=25266"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}