{"id":27926,"date":"2021-12-28T21:24:30","date_gmt":"2021-12-28T21:24:30","guid":{"rendered":"http:\/\/Build-Customized-Video-Players-with-React"},"modified":"2025-03-08T13:36:10","modified_gmt":"2025-03-08T21:36:10","slug":"build-customized-video-players-with-react","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/build-customized-video-players-with-react\/","title":{"rendered":"Build Customized Video Players with React"},"content":{"rendered":"

Do you need to add a video player to your website? Cloudinary offers various solutions that make it easy to build and personalize video galleries or video playlists with as many videos as you like.<\/p>\n

In this post, we will go through how to add two types of video players to your site using Cloudinary\u2019s JavaScript-based HTML5 video player. The first is an interactive video player, and the second is a video player with playlist functionality.<\/p>\n

Here is a link<\/a> to the demo on CodeSandbox.<\/p>\n<\/div>\n\n\n

\n <\/iframe>\n <\/div>\n\n\n

Cloudinary Setup<\/h2>\n

If you don\u2019t have a Cloudinary account, you can create one for free<\/a>. You should see all your credentials on your dashboard page (cloud name, etc.), but we\u2019ll need just the cloud name for this app.<\/p>\n

Upload some videos to your account or see this<\/a> short video on how to upload assets to Cloudinary. We need to add resource tags to the videos we want to use to create our playlist. See here<\/a> for how to add tags to your assets.<\/p>\n

We also need to disable the Resource list<\/strong> option because it is restricted by default. To enable it, click on the Security setting<\/strong> icon on your Cloudinary console. Click the Settings<\/strong> link on the security page and uncheck the Resource list<\/strong> option under Restricted media types<\/strong>.<\/p>\n

Project Setup<\/h2>\n

Open your terminal and run the following command:<\/p>\n

    npx create-react-app video-players\n<\/code><\/span><\/pre>\n
The command creates a React application inside a folder called video-players<\/code>.<\/p>\n
The next step is to install the dependencies we will need in this project. Run the following command to install them.<\/p>\n
    npm install cloudinary-core cloudinary-video-player\n<\/code><\/span><\/pre>\n
The command above installs the Cloudinary Video Player and the Cloudinary JavaScript SDK package.<\/p>\n
Video Player Component<\/h2>\n
Let\u2019s create the component where both our video players will be rendered. Inside your src<\/code> directory, create a folder called components<\/code>. Create a file called videoPlayer.js<\/code> inside the components<\/code> folder and add the following to it:<\/p>\n
    import<\/span> React, { useEffect } from<\/span> \"react\"<\/span>;\n    import<\/span> { Cloudinary } from<\/span> \"cloudinary-core\"<\/span>;\n    \n    const<\/span> cld = new<\/span> Cloudinary({ cloud_name<\/span>: \"ifeomaimoh\"<\/span>, secure<\/span>: true<\/span> });\n    \n    const<\/span> VideoPlayers = ()<\/span> =><\/span> {\n      return<\/span> (\n        <div<\/span> className<\/span>=\"container\"<\/span>><\/span>\n          <div<\/span>><\/span>\n            <h1<\/span>><\/span>Interactive Video Player<\/h1<\/span>><\/span>\n            <p<\/span>><\/span>Click on the video player to see the UI interactions.<\/p<\/span>><\/span>\n          <\/div<\/span>><\/span>\n        <\/div<\/span>><\/span><\/span>\n      );\n    };\n    export<\/span> default<\/span> VideoPlayers;\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
We\u2019re importing Cloudinary and instantiating a new Cloudinary class configured with our cloud name in the code above. For now, our component called VideoPlayers<\/code> returns a simple UI where we will embed our video players.<\/p>\n
Interactive Video Player<\/h2>\n
Let\u2019s go ahead and create our interactive video player. In the components<\/code> folder, create another file named interactive-player.js<\/code> and add the following to it:<\/p>\n
    function<\/span> interactivePlayer<\/span>(cld<\/span>) <\/span>{\n    \n      var<\/span> player = cld.videoPlayer(\"player\"<\/span>, {\n        bigPlayButton<\/span>: true<\/span>,\n        interactionDisplay<\/span>: {\n          theme<\/span>: {\n            template<\/span>: \"shadowed\"<\/span>,\n          },\n          layout<\/span>: {\n            enable<\/span>: true<\/span>,\n            showAgain<\/span>: true<\/span>,\n          },\n        },\n        controls<\/span>: true<\/span>,\n        \/\/ showJumpControls: true,<\/span>\n      });\n      const<\/span> sources = {\n        top<\/span>: \"https:\/\/res.cloudinary.com\/ifeomaimoh\/video\/upload\/v1637162706\/flower_left_zoom.mp4\"<\/span>,\n        middle<\/span>:\n          \"https:\/\/res.cloudinary.com\/ifeomaimoh\/video\/upload\/v1637162660\/flower_middle_zoom.mp4\"<\/span>,\n        bottom<\/span>:\n          \"https:\/\/res.cloudinary.com\/ifeomaimoh\/video\/upload\/v1637162736\/flower_right_zoom.mp4\"<\/span>,\n      };\n    \n      player.source(\"flower\"<\/span>, {\n        interactionAreas<\/span>: {\n          enable<\/span>: true<\/span>,\n          template<\/span>: \"landscape\"<\/span>,\n          onClick<\/span>: function<\/span> (event<\/span>) <\/span>{\n            var<\/span> src = sources[event.item.id];\n            event.zoom(src);\n          },\n        },\n      });\n      return<\/span>;\n    }\n    export<\/span> default<\/span> interactivePlayer;\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
In the code above, our function interactivePlayer<\/code> accepts cld<\/code> as props \u2014 the instance of Cloudinary we defined in videoPlayer<\/code>. We instantiate the video player using the videoPlayer<\/code> method, which returns a player<\/code> object.  The method accepts an ID \u2014 that will be the ID of the video element, which tells Cloudinary where to embed the video player. It also accepts some configurations as constructor parameters.<\/p>\n
Next, we call the source<\/code> method, which takes a string as its first argument. The string is the public id of the video. We\u2019re adding interactivity (zoom functionality) to our source video by defining a set of interaction areas with the interactionAreas<\/code> object, passed as a second argument.<\/p>\n
Embed the Video Player<\/h2>\n
Now, let\u2019s bring in our interactivePlayer<\/code> component into our VideoPlayer.js<\/code> file. Update the VideoPlayers<\/code> component with the following:<\/p>\n
    import React, { useEffect } from \"react\"<\/span>;\n    import { Cloudinary } from \"cloudinary-core\"<\/span>;\n    import interactivePlayer from \".\/interactive-player\"<\/span>;\n    \n    const<\/span> cld = new<\/span> Cloudinary({ cloud_name: \"ifeomaimoh\"<\/span>, secure: true<\/span> });\n    \n    const<\/span> VideoPlayers = () => {\n    \n      useEffect(() => {\n        interactivePlayer(cld);\n      }, []);\n    \n      return<\/span> (\n        <div className=\"container\"<\/span>>\n            \/\/...<\/span>\n            <div style={{ width: \"600px\"<\/span>, height: \"400\"<\/span>, margin: \"20px\"<\/span> }}>\n              <video\n                id=\"player\"<\/span>\n                controls\n                muted\n                className=\"cld-video-player cld-fluid cld-video-player-skin-dark\"<\/span>\n              ><\/video>\n            <\/div>\n          <\/div>\n        <\/div>\n      );\n    };\n    \n    export default<\/span> VideoPlayers;\n<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n
In the code above, we imported our interactivePlayer<\/code> function and called it inside a useEffect()<\/code> hook, and it receives cld<\/code> as an argument. We then embed the video player by adding a video<\/code> tag and passing the id<\/code> referenced in the videoPlayer<\/code> method and the cld-video-player<\/code> class.  The video player also receives the cld-video-player<\/code>  cld-fluid<\/code> class, which will dynamically adjust the player size to fit its container or window.<\/p>\n
Let\u2019s import the VideoPlayers<\/code> component into our App.js<\/code> file. Replace everything in your App.js<\/code> file with the following:<\/p>\n
    import<\/span> React from<\/span> \"react\"<\/span>;\n    import<\/span> \"cloudinary-video-player\/dist\/cld-video-player.min.css\"<\/span>;\n    import<\/span> VideoPlayers from<\/span> \".\/components\/videoPlayer\"<\/span>;\n    \n    export<\/span> default<\/span> function<\/span> App<\/span>(<\/span>) <\/span>{\n      return<\/span> (\n        <div<\/span> className<\/span>=\"App\"<\/span>><\/span>\n          <VideoPlayers<\/span> \/><\/span>\n        <\/div<\/span>><\/span><\/span>\n      );\n    };\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Head over to your browser, you should see the following:<\/p>\n
\"\"<\/p>\n
You can interact with the video if you click on the areas of interaction we added.<\/p>\n
Video Playlist Player<\/h2>\n
Let\u2019s set up a video player with a playlist functionality since we already uploaded and tagged our videos earlier.<\/p>\n
Create a file named videoPlaylist.js<\/code> in your components folder and add the following to it:<\/p>\n
    import<\/span> \"cloudinary-video-player\"<\/span>;\n    \n    function<\/span> videoPlaylist<\/span>(cld<\/span>) <\/span>{\n    \n      const<\/span> player = cld.videoPlayer(\"playlist\"<\/span>, {\n        controls<\/span>: true<\/span>,\n        bigPlayButton<\/span>: true<\/span>,\n        playlistWidget<\/span>: {\n          direction<\/span>: \"horizontal\"<\/span>,\n          total<\/span>: 6<\/span>,\n        },\n        showJumpControls<\/span>: true<\/span>,\n      });\n    \n      player.playlistByTag(\"myTag\"<\/span>, {\n        autoAdvance<\/span>: false<\/span>,\n        repeat<\/span>: true<\/span>,\n      });\n      return<\/span>;\n    }\n    export<\/span> default<\/span> videoPlaylist;\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Here, we created a function called videoPlaylist<\/code> that accepts cld<\/code> as a parameter. We also instantiate the video player using the videoPlayer<\/code> method, which returns a player object.<\/p>\n
The difference between this player and the first one we created is that we\u2019re calling the playlistByTag<\/code> method and passing it a tag (the tag name we specified for our videos) to automatically retrieve and create a playlist of six videos with the specified tag.<\/p>\n
We added the playlist widget as a constructor parameter and set the direction for displaying upcoming videos to horizontal.<\/p>\n
Now let\u2019s import the videoPlaylist<\/code> component into our videoPlayer.js<\/code> file. Update videoPlayer.js<\/code> with the following:<\/p>\n
    \/\/ import videoPlaylist<\/span>\n    import VideoPlaylist from \".\/videoPlaylist\"<\/span>;\n    \n    const<\/span> cld = new<\/span> Cloudinary({ cloud_name: \"ifeomaimoh\"<\/span>, secure: true<\/span> });\n    \n    const<\/span> VideoPlayers = () => {\n    \n      useEffect(() => {\n        interactivePlayer(cld);\n        videoPlaylist(cld);\n      }, []);\n    \n      return<\/span> (\n        <div className=\"container\"<\/span>>\n            \/\/...<\/span>\n    \n            <div style={{ width: \"600px\"<\/span>, height: \"400\"<\/span>, margin: \"20px\"<\/span> }}>\n              <video\n                id=\"player\"<\/span>\n                controls\n                muted\n                className=\"cld-video-player cld-fluid cld-video-player-skin-dark\"<\/span>\n              ><\/video>\n            <\/div>\n             {\/* Add the following *\/<\/span>}\n            <div style={{ width: \"600px\"<\/span>, height: \"400\"<\/span> }} className=\"video-card\"<\/span>>\n              <video\n                id=\"playlist-player\"<\/span>\n                className=\"cld-video-player cld-fluid cld-video-player-skin-dark\"<\/span>\n              ><\/video>\n            <\/div>\n          <\/div>\n        <\/div>\n      );\n    };\n    \n    export default<\/span> VideoPlayers;\n<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":27927,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[134,145,246,371,303],"class_list":["post-27926","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-guest-post","tag-html5","tag-react","tag-under-review","tag-video"],"acf":[],"yoast_head":"\nBuild Customized Video Players with React<\/title>\n<meta name=\"description\" content=\"In this post, we will go through how to build customized video players using Cloudinary's JavaScript-based HTML5 video player.\" \/>\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\/guest_post\/build-customized-video-players-with-react\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Build Customized Video Players with React\" \/>\n<meta property=\"og:description\" content=\"In this post, we will go through how to build customized video players using Cloudinary's JavaScript-based HTML5 video player.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/guest_post\/build-customized-video-players-with-react\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2021-12-28T21:24:30+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-03-08T21:36:10+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1681925859\/Web_Assets\/blog\/bcd73d76cea153c6c802da891991b55f4ad377c7-6000x3375-1_27927f85be\/bcd73d76cea153c6c802da891991b55f4ad377c7-6000x3375-1_27927f85be-jpg?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"6000\" \/>\n\t<meta property=\"og:image:height\" content=\"3375\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\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\/guest_post\/build-customized-video-players-with-react#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/build-customized-video-players-with-react\/\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Build Customized Video Players with React\",\"datePublished\":\"2021-12-28T21:24:30+00:00\",\"dateModified\":\"2025-03-08T21:36:10+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/build-customized-video-players-with-react\/\"},\"wordCount\":6,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/build-customized-video-players-with-react#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925859\/Web_Assets\/blog\/bcd73d76cea153c6c802da891991b55f4ad377c7-6000x3375-1_27927f85be\/bcd73d76cea153c6c802da891991b55f4ad377c7-6000x3375-1_27927f85be.jpg?_i=AA\",\"keywords\":[\"Guest Post\",\"HTML5\",\"React\",\"Under Review\",\"Video\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2021\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/build-customized-video-players-with-react\/\",\"url\":\"https:\/\/cloudinary.com\/blog\/guest_post\/build-customized-video-players-with-react\",\"name\":\"Build Customized Video Players with React\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/build-customized-video-players-with-react#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/build-customized-video-players-with-react#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925859\/Web_Assets\/blog\/bcd73d76cea153c6c802da891991b55f4ad377c7-6000x3375-1_27927f85be\/bcd73d76cea153c6c802da891991b55f4ad377c7-6000x3375-1_27927f85be.jpg?_i=AA\",\"datePublished\":\"2021-12-28T21:24:30+00:00\",\"dateModified\":\"2025-03-08T21:36:10+00:00\",\"description\":\"In this post, we will go through how to build customized video players using Cloudinary's JavaScript-based HTML5 video player.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/build-customized-video-players-with-react#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/guest_post\/build-customized-video-players-with-react\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/build-customized-video-players-with-react#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925859\/Web_Assets\/blog\/bcd73d76cea153c6c802da891991b55f4ad377c7-6000x3375-1_27927f85be\/bcd73d76cea153c6c802da891991b55f4ad377c7-6000x3375-1_27927f85be.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925859\/Web_Assets\/blog\/bcd73d76cea153c6c802da891991b55f4ad377c7-6000x3375-1_27927f85be\/bcd73d76cea153c6c802da891991b55f4ad377c7-6000x3375-1_27927f85be.jpg?_i=AA\",\"width\":6000,\"height\":3375},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/build-customized-video-players-with-react#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Build Customized Video Players with React\"}]},{\"@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":"Build Customized Video Players with React","description":"In this post, we will go through how to build customized video players using Cloudinary's JavaScript-based HTML5 video player.","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\/guest_post\/build-customized-video-players-with-react","og_locale":"en_US","og_type":"article","og_title":"Build Customized Video Players with React","og_description":"In this post, we will go through how to build customized video players using Cloudinary's JavaScript-based HTML5 video player.","og_url":"https:\/\/cloudinary.com\/blog\/guest_post\/build-customized-video-players-with-react","og_site_name":"Cloudinary Blog","article_published_time":"2021-12-28T21:24:30+00:00","article_modified_time":"2025-03-08T21:36:10+00:00","og_image":[{"width":6000,"height":3375,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1681925859\/Web_Assets\/blog\/bcd73d76cea153c6c802da891991b55f4ad377c7-6000x3375-1_27927f85be\/bcd73d76cea153c6c802da891991b55f4ad377c7-6000x3375-1_27927f85be-jpg?_i=AA","type":"image\/jpeg"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/build-customized-video-players-with-react#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/build-customized-video-players-with-react\/"},"author":{"name":"","@id":""},"headline":"Build Customized Video Players with React","datePublished":"2021-12-28T21:24:30+00:00","dateModified":"2025-03-08T21:36:10+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/build-customized-video-players-with-react\/"},"wordCount":6,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/build-customized-video-players-with-react#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925859\/Web_Assets\/blog\/bcd73d76cea153c6c802da891991b55f4ad377c7-6000x3375-1_27927f85be\/bcd73d76cea153c6c802da891991b55f4ad377c7-6000x3375-1_27927f85be.jpg?_i=AA","keywords":["Guest Post","HTML5","React","Under Review","Video"],"inLanguage":"en-US","copyrightYear":"2021","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/build-customized-video-players-with-react\/","url":"https:\/\/cloudinary.com\/blog\/guest_post\/build-customized-video-players-with-react","name":"Build Customized Video Players with React","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/build-customized-video-players-with-react#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/build-customized-video-players-with-react#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925859\/Web_Assets\/blog\/bcd73d76cea153c6c802da891991b55f4ad377c7-6000x3375-1_27927f85be\/bcd73d76cea153c6c802da891991b55f4ad377c7-6000x3375-1_27927f85be.jpg?_i=AA","datePublished":"2021-12-28T21:24:30+00:00","dateModified":"2025-03-08T21:36:10+00:00","description":"In this post, we will go through how to build customized video players using Cloudinary's JavaScript-based HTML5 video player.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/build-customized-video-players-with-react#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/guest_post\/build-customized-video-players-with-react"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/build-customized-video-players-with-react#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925859\/Web_Assets\/blog\/bcd73d76cea153c6c802da891991b55f4ad377c7-6000x3375-1_27927f85be\/bcd73d76cea153c6c802da891991b55f4ad377c7-6000x3375-1_27927f85be.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925859\/Web_Assets\/blog\/bcd73d76cea153c6c802da891991b55f4ad377c7-6000x3375-1_27927f85be\/bcd73d76cea153c6c802da891991b55f4ad377c7-6000x3375-1_27927f85be.jpg?_i=AA","width":6000,"height":3375},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/build-customized-video-players-with-react#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Build Customized Video Players with React"}]},{"@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\/v1681925859\/Web_Assets\/blog\/bcd73d76cea153c6c802da891991b55f4ad377c7-6000x3375-1_27927f85be\/bcd73d76cea153c6c802da891991b55f4ad377c7-6000x3375-1_27927f85be.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/27926","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=27926"}],"version-history":[{"count":3,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/27926\/revisions"}],"predecessor-version":[{"id":37140,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/27926\/revisions\/37140"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/27927"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=27926"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=27926"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=27926"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
We\u2019re calling the zoom<\/code> method inside the  onClick<\/code> event handler. The zoom<\/code> method receives a source ID which we are then using to select a video from the sources<\/code> object. This will help us achieve more advanced zooming. See here<\/a> for more on interactive videos.<\/p>\n