{"id":22093,"date":"2020-06-08T16:26:16","date_gmt":"2020-06-08T16:26:16","guid":{"rendered":"http:\/\/get_interactive_with_cloudinary_s_shoppable_video_and_video_player"},"modified":"2025-03-23T14:07:23","modified_gmt":"2025-03-23T21:07:23","slug":"get_interactive_with_cloudinary_s_shoppable_video_and_video_player","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/get_interactive_with_cloudinary_s_shoppable_video_and_video_player","title":{"rendered":"Get Interactive With Cloudinary\u2019s Shoppable Video and Video Player"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><link href=\"https:\/\/unpkg.com\/cloudinary-video-player@1.4.0\/dist\/cld-video-player.min.css\" rel=\"stylesheet\">\n<style>\n.cld-video-player .vjs-big-play-button .vjs-icon-placeholder {\n color: initial;\n}\n.cld-spbl-post-play .cld-spbl-replay-btn {\n color: initial;\n}\n.cld-spbl-post-play .cld-spbl-replay-btn {\n color: initial;\n}\n.vjs-control-bar {\n color: initial;\n}\n.cld-video-player .vjs-context-menu-ui .vjs-menu-content .vjs-menu-item {\n  color: initial;\n}\n.video-js .vjs-progress-holder .vjs-play-progress {\n  background-color: initial;\n}\n<\/style>\n<p>Attracting visitors to engage with your product videos is an excellent way to boost clickthrough rates, and ultimately, sales. The question is, how do you generate that engagement? Playlists and clickable links come to mind, but generally they appear only after a video has finished playing. For a more captivating user experience, add relevant interactivity throughout the video.<\/p>\n<p>This can be a troublesome task and you must still mount a lot of effort to edit the individual videos. That is where the Cloudinary Video Player comes in.<\/p>\n<p>This post introduces Cloudinary\u2019s new capability, <a href=\"https:\/\/cloudinary.com\/documentation\/video_player_shoppable_videos\">Shoppable Video<\/a>, by leveraging which you can produce clickable videos that match your brand on a larger scale, elevate brand awareness, and interact with audiences through robust features. Specifically, Shoppable Video\u2014<\/p>\n<ul>\n<li>Lists your products alongside your video in an expandable products bar.<\/li>\n<li>Enables visitors to interact with your products and find out more details.<\/li>\n<li>Links visitors to the relevant pages to make a purchase.<\/li>\n<li>Adds clickable hotspots to the video to highlight your product\u2019s exact location.<\/li>\n<li>Brings products to life through interactivity.<\/li>\n<\/ul>\n<p><a class=\"c-image-link\" href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_700,c_fill,f_auto,q_auto,dpr_2.0\/docs\/shoppable_annotated.png\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_700,c_fill,f_auto,q_auto,dpr_2.0\/docs\/shoppable_annotated.png\" alt=\"Shoppable Video features\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1400\" height=\"1050\"\/><\/a><\/p>\n<p>To get started with Shoppable Video, see the <a href=\"https:\/\/cloudinary.com\/documentation\/video_player_shoppable_videos\">documentation<\/a>.<\/p>\n<h2>Deep Dive Into Shoppable Video Features<\/h2>\n<p><a href=\"https:\/\/cloudinary.com\/glossary\/shoppable-video\">Shoppable Video<\/a> offers numerous features for enhancing video experience.<\/p>\n<h3>The Products Bar<\/h3>\n<p>The products bar, which appears to the right of the video, is where you list the products you want to showcase, highlighting each one as it appears in the video. You can configure the bar to your desired width and customize how and when the bar is displayed, as follows:<\/p>\n<ul>\n<li>You set the bar width as a percentage of the full width of the player. Additionally, you can specify when you want the bar to open and close, such as opening when the video loads and closing after a set number of seconds if no interactions occur.<\/li>\n<li>You can configure the product images for display, aligning them with your Product Description Page (PDP) assets. Those images, which are what your audience will interact with, support two configurable behaviors, according you finer control of the information to present:\n<ul>\n<li>\n<strong>On-click<\/strong>, which you can define as either a URL that takes the audience to the relevant PDP or a time at which to display the video in where the product appears.<\/li>\n<li>\n<strong>On-hover<\/strong>, which you can define as either an alternative image or as a brief description of the product.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>By showcasing all the products in your video, the product bar smoothes the way to convincing prospective customers to take that step toward purchase.<\/p>\n<p><a class=\"c-image-link\" href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/h_0.5\/w_400,c_fill,f_auto,q_auto\/docs\/shoppable_products_bar.png\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/h_0.5\/w_400,c_fill,f_auto,q_auto\/docs\/shoppable_products_bar.png\" alt=\"Shoppable Products Bar\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"400\" height=\"600\"\/><\/a><\/p>\n<h3>Hotspots<\/h3>\n<p>Hotspots are superb for interactivity through video. For each product, you can define multiple hotspots that target the exact location of a product along with additional information. Perhaps you just want to show the product name, or maybe add the price or a discount, too.<\/p>\n<p>Hotspots work best when combined with the seek capability in the products bar. That means someone can click a product in the products bar and be taken to the right part of the video to initiate interaction. The hotspots will then highlight the exact location of the product, and on-hover, show helpful details as well as a link to the PDP.<\/p>\n<p>Here\u2019s an example of a hotspot that spotlights a handbag in addition to the discount and sale price. That\u2019s for sure a clever way to entice visitors to buy the item.<\/p>\n<p><a class=\"c-image-link\" href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_700,c_fill,f_auto,q_auto,dpr_2.0\/docs\/shoppable_hotspots.png\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_700,c_fill,f_auto,q_auto,dpr_2.0\/docs\/shoppable_hotspots.png\" alt=\"Shoppable Hotspots\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1400\" height=\"906\"\/><\/a><\/p>\n<h3>Post-Roll Gallery<\/h3>\n<p>Once the video has finished playing, you\u2019d want to ensure that nobody misses the products on offer. That\u2019s where the post-roll gallery comes in. On by default, the gallery displays the products listed in the products bar in a carousel across the full width of the video. On-click and on-hover also work in that carousel, so viewers can easily jump over to your PDPs or seek the relevant location in the video.\nRelative to the products bar, the post-roll gallery offers a less intrusive shopping experience.<\/p>\n<p><a class=\"c-image-link\" href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_700,c_fill,f_auto,q_auto,dpr_2.0\/docs\/shoppable_post_roll.png\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_700,c_fill,f_auto,q_auto,dpr_2.0\/docs\/shoppable_post_roll.png\" alt=\"Shoppable Post-Roll Gallery\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1400\" height=\"801\"\/><\/a><\/p>\n<h2>A Demo<\/h2>\n<p>Below is a demo that demonstrates the key features of Shoppable Video and a customized UI that matches the Cloudinary fashion brand. Because this demo runs on top of the Cloudinary Video Player, you can leverage all the awesome features of the player and those on Cloudinary\u2019s Dynamic Video Platform. Go ahead and press play!<\/p>\n <div style=\"max-width: 800px; margin: 40px auto;\"><video id=\"first-demo\" muted controls playsinline class=\"cld-video-player cld-fluid cld-video-player-skin-light\" width=\"700\"><\/video><\/div>\n<h2>Additional Use-Cases<\/h2>\n<p>Beyond <a href=\"https:\/\/cloudinary.com\/guides\/e-commerce-platform\/select-the-right-e-commerce-platform-for-your-needs\">e-commerce<\/a>, Shoppable Video features many nifty capabilities for other use-cases. That\u2019s thanks to the interactivity of the products bar and hotspots for displaying the product features that appear in a video, leading to a much more engaged experience.<\/p>\n<h3>More Engaging Property Tours<\/h3>\n<p>Patrons can never become truly acquainted with the ins and outs of a property without actually visiting it in person. Viewing static images is by far not good enough. However, scenarios abound that prevent people from actually visiting a property. Cloudinary\u2019s Shoppable Video feature for property tours engages viewers effectively, enabling them to explore a potential new home or holiday rental in detail.<\/p>\n<p>See below for a short property tour, in which the products bar highlights a selection of the rooms in the house. Your viewers can see at a glance the details of each room and jump straight to view it. In addition, hotspots everywhere show them the various features of the rooms.<\/p>\n<p>While building hotspots for your video, consider spotlighting a period hallmark or a suite of brand-new appliances.<\/p>\n<div style=\"max-width: 800px; margin: 40px auto;\"><video id=\"property-player\" controls playsinline class=\"cld-video-player cld-fluid cld-video-player-skin-light\"><\/video><\/div>\n<h3>Interactive Hotel Experience<\/h3>\n<p>Not only can choosing a vacation hotel be time consuming, but also the real experience can be disappointing. Why not use Shoppable Videos interactive features to build an interactive hotel episode for your shoppers?<\/p>\n<p>The products bar can list your hotel or resort\u2019s amenities, restaurants, and rooms and take visitors on a tour before they arrive. You can also add information like opening times or whisk visitors off to book spa treatments. Cloudinary\u2019s platform makes all that a breeze to do at scale. Plus, you can take advantage of the platform\u2019s remarkable optimization and transformation capabilities.<\/p>\n<div style=\"max-width: 800px; margin: 40px auto;\">\n<video id=\"hotel-player\" controls playsinline class=\"cld-video-player-skin-light cld-video-player cld-fluid\">\n<\/video><\/div>\n<h2>Summary<\/h2>\n<p>To recap, Shoppable Video is a superb means for raising clickthrough rates and encouraging impromptu purchases. In particular, its interactivity feature, applicable to many use cases, enhances the overall experience, masterfully promoting your brand awareness.<\/p>\n<p>For more details, contact us or have a look through the <a href=\"https:\/\/cloudinary.com\/documentation\/video_player_shoppable_videos\">documentation<\/a>.<\/p>\n<script src=\"https:\/\/unpkg.com\/cloudinary-core@2.8.2\/cloudinary-core-shrinkwrap.min.js\" type=\"text\/javascript\"><\/script>\n<script src=\"https:\/\/unpkg.com\/cloudinary-video-player@1.4.0\/dist\/cld-video-player.min.js\" \n    type=\"text\/javascript\"><\/script>\n<!-----------Shoppable Demo Scripts------>\n<script>\n\/\/cld setup\nvar cld = cloudinary.Cloudinary.new({ cloud_name: \"demo\" });\n\n\n\/\/first demo\nvar demoPlayer = cld.videoPlayer(\"first-demo\", {\n    logoImageUrl: \"https:\/\/res.cloudinary.com\/demo\/image\/upload\/docs\/shoppable_toggle\",\n    hideContextMenu: true,\n    bigPlayButton: \"init\"\n});\nvar source = {\n    shoppable: {\n        showPostPlayOverlay: true,     \n        transformation: {\n            crop: \"pad\",\n            aspect_ratio: \"1\"\n        },\n        products: [\n        {\n            productId: 1,\n            productName: \"Sunglasses\",\n            startTime: 0,\n            endTime: 2,\n            publicId:\n            \"docs\/shoppable_sunglasses\",\n            hotspots: [\n            {\n                time: \"00:06\",\n                x: \"50%\",\n                y: \"25%\",\n                tooltipPosition: \"left\",\n                clickUrl: \"https:\/\/cloudyfashion.dev\/\"\n            }\n            ],\n            onHover: {\n            action: \"overlay\",\n            args: \"Click to see this product in the video\"\n            },\n            onClick: {\n            action: \"seek\",\n            pause: 8,\n            args: {\n                time: \"00:06\"\n                }\n            }\n        },\n        {\n            productId: 2,\n            productName: \"Green Dress\",\n            startTime: 2,\n            endTime: 5,\n            publicId: \"docs\/shoppable_dress.jpg\",\n            onClick: {\n            action: \"goto\",\n            pause: true,\n            args: {\n                url: \"https:\/\/cloudyfashion.dev\/\"\n                }\n            }\n        },\n        {\n            productId: 3,\n            productName: \"Brown Bag\",\n            startTime: 7,\n            endTime: 11,\n            publicId:\n            \"docs\/shoppable_bag\",\n            onHover: {\n            action: \"switch\",\n            args: {\n                publicId:\n                \"docs\/shoppable_bag2\"\n                }\n            },\n            onClick: {\n            action: \"goto\",\n            pause: true,\n            args: {\n                url:\n                \"https:\/\/cloudyfashion.dev\/\"\n                }\n            }\n        }\n        ]\n    }\n}\n\ndemoPlayer.source(\"docs\/shoppable_demo\", source)\n\n\n\/\/property demo\n\nvar propertyPlayer = cld\n  .videoPlayer(\"property-player\", {\n    logoOnclickUrl: \"https:\/\/cloudinary.com\",\n    hideContextMenu: true,\n      posterOptions: {\n      start_offset: 1,\n    transformation: {\n      height: 0.75, width: 1,crop: \"crop\"\n    }\n  },\n    logoImageUrl:\n      \"https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_60\/docs\/home_icon.png\"\n  })\n  .width(400);\n\nvar source = {\n  transformation: [\n    {\n      overlay: \"docs:1px\",\n      effect: \"colorize\",\n      color: \"black\",\n      opacity: 50,\n      width: 400,\n      height: 100,\n      y: 70,\n      gravity: \"south_west\"\n    },\n    {\n      overlay: {\n        font_family: \"heebo\",\n        font_size: 12,\n        font_weight: \"bold\",\n        text: \"james%40housesales.com\"\n      },\n      color: \"white\",\n      gravity: \"south_west\",\n      x: 100,\n      y: 80,\n      opacity: 100\n    },\n    {\n      overlay: {\n        font_family: \"heebo\",\n        font_size: 35,\n        font_weight: \"bold\",\n        text: \"James%20Smith\"\n      },\n      gravity: \"south_west\",\n      y: 110,\n      x: 95,\n      color: \"#45B4E9\"\n    },\n    {\n      overlay: \"docs:agent\",\n      width: 50,\n      gravity: \"south_west\",\n      x: 15,\n      y: 80,\n      crop: \"thumb\"\n    },\n    { height: 0.75, width: 1, crop: \"crop\" }\n  ],\n  shoppable: {\n    startState: \"openOnPlay\", \/\/ Default 'openOnPlay'\n    autoClose: 2, \/\/ Default 2\n    showPostPlayOverlay: true, \/\/ Default false\n    width: \"15%\", \/\/ Default '20%'\n    bannerMsg: \"START VIEWING\", \/\/ Default 'Shop the Video'\n    toggleIcon:\n      \"https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_60\/docs\/home_icon.png\",\n    transformation: {\n      \/\/ These are the defaults\n      crop: \"pad\",\n      aspect_ratio: \"1\"\n    },\n    products: [\n      {\n        productId: 1,\n        productName: \"Brand New Appliances!\",\n        startTime: 21,\n        endTime: 34,\n        publicId: \"docs\/house_kitchen\",\n        onHover: {\n          action: \"overlay\",\n          args: \"Sleek and modern kitchen\"\n        },\n        onClick: {\n          action: \"seek\",\n          pause: 8,\n          args: {\n            time: \"00:25\"\n          }\n        },\n        hotspots: [\n          {\n            time: \"00:25\",\n            x: \"10%\",\n            y: \"25%\",\n            tooltipPosition: \"right\",\n            clickUrl: \"https:\/\/example.net\/\"\n          }\n        ]\n      },\n      {\n        productId: 2,\n        productName: \"Living Room\",\n        startTime: 35,\n        endTime: 45,\n        publicId: \"docs\/living1\",\n        onHover: {\n          action: \"overlay\",\n          args: \"Bright and spacious living room\"\n        },\n        onClick: {\n          action: \"seek\",\n          pause: 3,\n          args: {\n            time: \"00:35\"\n          }\n        }\n      },\n      {\n        productId: 3,\n        productName: \"Bathroom\",\n        startTime: 46,\n        endTime: 57,\n        publicId: \"docs\/bathroom1\",\n        onHover: {\n          action: \"overlay\",\n          args: \"Amazing bathroom with a view\"\n        },\n        onClick: {\n          action: \"seek\",\n          pause: 3,\n          args: {\n            time: \"00:46\"\n          }\n        }\n      },\n      {\n        productId: 4,\n        productName: \"Agent\",\n        startTime: 0,\n        endTime: 0,\n        publicId: \"docs\/agent\",\n        transformation: {\n          crop: \"thumb\",\n          gravity: \"face\",\n          radius: 100\n        },\n        onHover: {\n          action: \"overlay\",\n          args: \"Contact Agent\"\n        },\n        onClick: {\n          action: \"goto\",\n          pause: 3,\n          args: {\n            url: \"https:\/\/example.net\"\n          }\n        }\n      }\n    ]\n  }\n};\n\npropertyPlayer.source(\"docs\/house2\", source);\n\n\/\/hotel demo\n\n\nvar hotelPlayer = cld.videoPlayer(\"hotel-player\", {\n  logoOnclickUrl: \"https:\/\/cloudinary.com\",\n  hideContextMenu: true,\n  posterOptions: {\n      start_offset: 1,\n    transformation: {\n      height: 0.74, width: 1,crop: \"crop\"\n    }\n  },\n  logoImageUrl: \"https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_60\/docs\/palm_icon.png\"\n}).width(400);\n\nvar source = {\n  transformation: \n    {height: 0.74, width: 1,crop: \"crop\"},\n  shoppable: {\n    startState: \"openOnPlay\", \/\/ Default 'openOnPlay'\n    autoClose: 2, \/\/ Default 2\n    showPostPlayOverlay: true, \/\/ Default false\n    width: \"15%\", \/\/ Default '20%'\n    bannerMsg: \"START VIEWING\", \/\/ Default 'Shop the Video'\n                toggleIcon: \"https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_60\/docs\/palm_icon.png\",    \n    transformation: {\n      \/\/ These are the defaults\n      crop: \"pad\",\n      aspect_ratio: \"1\"\n    },\n    products: [\n      {\n        productId: 1,\n        productName: \"Hotel Lounge\",\n        startTime: 30,\n        endTime: 40,\n        publicId: \"docs\/hotel_lounge1\",\n        onHover: {\n          action: \"overlay\",\n          args: \"Modern and cosy lounge for drinks\"\n        },\n        onClick: {\n          action: \"seek\",\n          pause: false,\n          args: {\n            time: \"00:30\"\n          }\n        }\n      },\n      {\n        productId: 2,\n        productName: \"Hotel Buffet\",\n        startTime: 40,\n        endTime: 55,\n        publicId: \"docs\/hotel_buffet1\",\n        onHover: {\n          action: \"overlay\",\n          args: \"Award winning cuisine\"\n        },\n        onClick: {\n          action: \"seek\",\n          pause: false,\n          args: {\n            time: \"00:41\"\n          }\n        }\n      },\n      {\n        productId: 3,\n        productName: \"Hotel Pool\",\n        startTime: 55,\n        endTime: 66,\n        publicId: \"docs\/hotel_pool1\",\n        onHover: {\n          action: \"overlay\",\n          args: \"One of many gorgeous pools on the resort\"\n        },\n        onClick: {\n          action: \"seek\",\n          pause: false,\n          args: {\n            time: \"00:56\"\n          }\n        }\n      },\n            {\n        productId: 4,\n        productName: \"Hotel Room\",\n        startTime: 66,\n        endTime: 87,\n        publicId: \"docs\/hotel_room1\",\n        onHover: {\n          action: \"overlay\",\n          args: \"Beautiful bedrooms with gorgeous decor\"\n        },\n        onClick: {\n          action: \"seek\",\n          pause: false,\n          args: {\n            time: \"00:67\"\n          }\n        }\n      }\n    ]\n  }\n};\n\nhotelPlayer.source(\"docs\/hotel\", source);\n\n<\/script>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":22094,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[25,97,98,270,303,310],"class_list":["post-22093","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-asset-management","tag-dynamic-video","tag-e-commerce","tag-shoppable-video","tag-video","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>Get Interactive With Shoppable Video and Cloudinary<\/title>\n<meta name=\"description\" content=\"Learn about Cloudinary\u2019s newly launched Shoppable Video, which enables you to produce brand-matching interactive and shoppable videos on a larger scale.\" \/>\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\/get_interactive_with_cloudinary_s_shoppable_video_and_video_player\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Get Interactive With Cloudinary\u2019s Shoppable Video and Video Player\" \/>\n<meta property=\"og:description\" content=\"Learn about Cloudinary\u2019s newly launched Shoppable Video, which enables you to produce brand-matching interactive and shoppable videos on a larger scale.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/get_interactive_with_cloudinary_s_shoppable_video_and_video_player\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2020-06-08T16:26:16+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-03-23T21:07:23+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1649721530\/Web_Assets\/blog\/shoppable-video_22094de278\/shoppable-video_22094de278-png?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"1540\" \/>\n\t<meta property=\"og:image:height\" content=\"847\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\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\/get_interactive_with_cloudinary_s_shoppable_video_and_video_player#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/get_interactive_with_cloudinary_s_shoppable_video_and_video_player\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Get Interactive With Cloudinary\u2019s Shoppable Video and Video Player\",\"datePublished\":\"2020-06-08T16:26:16+00:00\",\"dateModified\":\"2025-03-23T21:07:23+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/get_interactive_with_cloudinary_s_shoppable_video_and_video_player\"},\"wordCount\":10,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/get_interactive_with_cloudinary_s_shoppable_video_and_video_player#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649721530\/Web_Assets\/blog\/shoppable-video_22094de278\/shoppable-video_22094de278.png?_i=AA\",\"keywords\":[\"Asset Management\",\"Dynamic Video\",\"E-commerce\",\"Shoppable Video\",\"Video\",\"Video Player\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2020\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/get_interactive_with_cloudinary_s_shoppable_video_and_video_player\",\"url\":\"https:\/\/cloudinary.com\/blog\/get_interactive_with_cloudinary_s_shoppable_video_and_video_player\",\"name\":\"Get Interactive With Shoppable Video and Cloudinary\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/get_interactive_with_cloudinary_s_shoppable_video_and_video_player#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/get_interactive_with_cloudinary_s_shoppable_video_and_video_player#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649721530\/Web_Assets\/blog\/shoppable-video_22094de278\/shoppable-video_22094de278.png?_i=AA\",\"datePublished\":\"2020-06-08T16:26:16+00:00\",\"dateModified\":\"2025-03-23T21:07:23+00:00\",\"description\":\"Learn about Cloudinary\u2019s newly launched Shoppable Video, which enables you to produce brand-matching interactive and shoppable videos on a larger scale.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/get_interactive_with_cloudinary_s_shoppable_video_and_video_player#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/get_interactive_with_cloudinary_s_shoppable_video_and_video_player\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/get_interactive_with_cloudinary_s_shoppable_video_and_video_player#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649721530\/Web_Assets\/blog\/shoppable-video_22094de278\/shoppable-video_22094de278.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649721530\/Web_Assets\/blog\/shoppable-video_22094de278\/shoppable-video_22094de278.png?_i=AA\",\"width\":1540,\"height\":847},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/get_interactive_with_cloudinary_s_shoppable_video_and_video_player#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Get Interactive With Cloudinary\u2019s Shoppable Video and Video Player\"}]},{\"@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\":\"\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Get Interactive With Shoppable Video and Cloudinary","description":"Learn about Cloudinary\u2019s newly launched Shoppable Video, which enables you to produce brand-matching interactive and shoppable videos on a larger scale.","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\/get_interactive_with_cloudinary_s_shoppable_video_and_video_player","og_locale":"en_US","og_type":"article","og_title":"Get Interactive With Cloudinary\u2019s Shoppable Video and Video Player","og_description":"Learn about Cloudinary\u2019s newly launched Shoppable Video, which enables you to produce brand-matching interactive and shoppable videos on a larger scale.","og_url":"https:\/\/cloudinary.com\/blog\/get_interactive_with_cloudinary_s_shoppable_video_and_video_player","og_site_name":"Cloudinary Blog","article_published_time":"2020-06-08T16:26:16+00:00","article_modified_time":"2025-03-23T21:07:23+00:00","og_image":[{"width":1540,"height":847,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1649721530\/Web_Assets\/blog\/shoppable-video_22094de278\/shoppable-video_22094de278-png?_i=AA","type":"image\/png"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/get_interactive_with_cloudinary_s_shoppable_video_and_video_player#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/get_interactive_with_cloudinary_s_shoppable_video_and_video_player"},"author":{"name":"","@id":""},"headline":"Get Interactive With Cloudinary\u2019s Shoppable Video and Video Player","datePublished":"2020-06-08T16:26:16+00:00","dateModified":"2025-03-23T21:07:23+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/get_interactive_with_cloudinary_s_shoppable_video_and_video_player"},"wordCount":10,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/get_interactive_with_cloudinary_s_shoppable_video_and_video_player#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649721530\/Web_Assets\/blog\/shoppable-video_22094de278\/shoppable-video_22094de278.png?_i=AA","keywords":["Asset Management","Dynamic Video","E-commerce","Shoppable Video","Video","Video Player"],"inLanguage":"en-US","copyrightYear":"2020","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/get_interactive_with_cloudinary_s_shoppable_video_and_video_player","url":"https:\/\/cloudinary.com\/blog\/get_interactive_with_cloudinary_s_shoppable_video_and_video_player","name":"Get Interactive With Shoppable Video and Cloudinary","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/get_interactive_with_cloudinary_s_shoppable_video_and_video_player#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/get_interactive_with_cloudinary_s_shoppable_video_and_video_player#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649721530\/Web_Assets\/blog\/shoppable-video_22094de278\/shoppable-video_22094de278.png?_i=AA","datePublished":"2020-06-08T16:26:16+00:00","dateModified":"2025-03-23T21:07:23+00:00","description":"Learn about Cloudinary\u2019s newly launched Shoppable Video, which enables you to produce brand-matching interactive and shoppable videos on a larger scale.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/get_interactive_with_cloudinary_s_shoppable_video_and_video_player#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/get_interactive_with_cloudinary_s_shoppable_video_and_video_player"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/get_interactive_with_cloudinary_s_shoppable_video_and_video_player#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649721530\/Web_Assets\/blog\/shoppable-video_22094de278\/shoppable-video_22094de278.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649721530\/Web_Assets\/blog\/shoppable-video_22094de278\/shoppable-video_22094de278.png?_i=AA","width":1540,"height":847},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/get_interactive_with_cloudinary_s_shoppable_video_and_video_player#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Get Interactive With Cloudinary\u2019s Shoppable Video and Video Player"}]},{"@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":""}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649721530\/Web_Assets\/blog\/shoppable-video_22094de278\/shoppable-video_22094de278.png?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/22093","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\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=22093"}],"version-history":[{"count":4,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/22093\/revisions"}],"predecessor-version":[{"id":37261,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/22093\/revisions\/37261"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/22094"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=22093"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=22093"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=22093"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}