{"id":27947,"date":"2021-05-18T22:02:29","date_gmt":"2021-05-18T22:02:29","guid":{"rendered":"http:\/\/add-custom-video-transitions-with-react-and-cloudinary"},"modified":"2025-03-02T14:07:54","modified_gmt":"2025-03-02T22:07:54","slug":"add-custom-video-transitions-with-react-and-cloudinary","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/add-custom-video-transitions-with-react-and-cloudinary\/","title":{"rendered":"Add Custom Video Transitions with React"},"content":{"rendered":"

For added cohesion and professionalism in videos, adding transitions goes a long way. In this tutorial, we\u2019ll first look at how Cloudinary allows us to concatenate two videos together with a custom transition between them. Then, we\u2019ll learn how to display it all together in a React component.<\/p>\n<\/div>\n\n\n

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

Upload your assets to Cloudinary<\/h2>\n

To start, we\u2019ll upload the videos to Cloudinary. The fastest way to do this is using the Cloudinary console<\/a>.<\/p>\n

For this tutorial, we\u2019ll use three videos:<\/p>\n

    \n
  1. The first video we want to show<\/li>\n
  2. The second video that should play after the first one<\/li>\n
  3. A video to use as a transition, often referred to as a \u201cluma matte\u201d<\/li>\n<\/ol>\n

    For our first video, we\u2019ll use this one:<\/p>\n

    https:\/\/res.cloudinary.com\/jlengstorf\/video\/upload\/mediajams\/disappointed-coffee.mp4\n<\/code><\/pre>\n
    For the second video, we\u2019ll use this:<\/p>\n
    https:\/\/res.cloudinary.com\/jlengstorf\/video\/upload\/mediajams\/deploy-to-netlify.mp4\n<\/code><\/pre>\n
    And finally, let\u2019s use this as our luma matte:<\/p>\n
    https:\/\/res.cloudinary.com\/jlengstorf\/video\/upload\/mediajams\/transition.mp4\n<\/code><\/pre>\n
    Now that we have the pieces, we can assemble them into a single, seamless video!<\/p>\n
    Create a Video Component in React<\/h2>\n
    Before we add the logo, let\u2019s create a React component that displays our Cloudinary video.<\/p>\n
    function<\/span> Video<\/span>({ cloudName, videoOneId, videoTwoId, transitionId }<\/span>) <\/span>{\n  \/\/ set up a Cloudinary URL to use your cloud name and display video<\/span>\n  let<\/span> videoSource = `https:\/\/res.cloudinary.com\/${cloudName}<\/span>\/video\/upload`<\/span>;\n\n  \/\/ automatically adjust the quality, and set the video to 600px wide<\/span>\n  videoSource += \"\/q_auto,w_600\"<\/span>;\n\n  \/\/ set the public ID to display the video as an MP4<\/span>\n  videoSource += `\/${videoOneId}<\/span>.mp4`<\/span>;\n\n  \/\/ add the full URL to a standard HTML5 video element<\/span>\n  return<\/span> (\n    <video<\/span> controls<\/span>><\/span>\n      <source<\/span> src<\/span>={videoSource}<\/span> type<\/span>=\"video\/mp4\"<\/span> \/><\/span>\n    <\/video<\/span>><\/span><\/span>\n  );\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
    The component, which we\u2019ve named Video<\/code>, accepts three values as props: cloudName<\/code>, videoOneId<\/code>, videoTwoId<\/code>,  and transitionId<\/code>.<\/p>\n
    The cloudName<\/code> should contain our Cloudinary cloud name, which is displayed at the top-right of the console.<\/p>\n
    \"The<\/p>\n
    videoOneId<\/code> will contain the public ID of the first video asset, which is the name of the file on Cloudinary, including any folders. Using our example video from above, the public ID is mediajams\/disappointed-coffee<\/code>.<\/p>\n
    videoTwoId<\/code> contains the public ID of the second video, which is mediajams\/deploy-to-netlify<\/code>.<\/p>\n
    Finally, the transitionId<\/code> will contain the public ID of the luma matte: mediajams\/transition<\/code>.<\/p>\n
    To set up our video, we build a Cloudinary URL that contains:<\/p>\n
      \n
    1. The public Cloudinary URL, https:\/\/res.cloudinary.com\/<\/code>\n<\/li>\n
    2. Our cloud name<\/li>\n
    3. The asset type, \/video\/upload\/<\/code>\n<\/li>\n
    4. Transformations to adjust the quality automatically and resize to 600px wide: q_auto,w_600<\/code>\n<\/li>\n
    5. The public ID of our video<\/li>\n
    6. A file type of MP4 using a file extension<\/li>\n<\/ol>\n
      Once we have the URL, we can add that as the src<\/code> value in a video element, and return that from our component.<\/p>\n
      Add a video overlay with a transition effect<\/h2>\n
      Combining the videos with a transition requires two discrete steps to be added:<\/p>\n
        \n
      1. The second video needs to be added as a video overlay<\/a>, which requires replacing any slashes in the public ID with the colon (:<\/code>) to avoid URL issues. Using the fill crop transformation, we set the video to be the same size as the first video.<\/li>\n
      2. Next, we add an additional video overlay with the transition video, but we apply the transition effect<\/a> to let Cloudinary know that it\u2019s a luma matte. We also crop and resize this appropriately. Finally, we apply the layer to let Cloudinary know that it needs to apply the transition to the two videos.<\/li>\n<\/ol>\n
          function<\/span> Video<\/span>({ cloudName, videoOneId, videoTwoId, transitionId }<\/span>) <\/span>{\n    \/\/ set up a Cloudinary URL to use your cloud name and display video<\/span>\n    let<\/span> videoSource = `https:\/\/res.cloudinary.com\/${cloudName}<\/span>\/video\/upload`<\/span>;\n\n    \/\/ automatically adjust the quality and set the video to 600px wide<\/span>\n    videoSource += \"\/q_auto,w_600\"<\/span>;\n\n+   \/\/ replace folder slashes with colons so the URL works<\/span>\n+   const<\/span> videoTwo = videoTwoId.replace(\"\/\"<\/span>, \":\"<\/span>);\n+\n+   \/\/ splice in the bumper video at the beginning<\/span>\n+   \/\/ set it to the same width and make sure it fills the space<\/span>\n+   videoSource += `\/l_video:${videoTwo}<\/span>,c_fill,w_600`<\/span>;\n+\n+   \/\/ replace folder slashes with colons so the URL works<\/span>\n+   const<\/span> transition = transitionId.replace(\"\/\"<\/span>, \":\"<\/span>);\n+\n+   \/\/ add in the transition and apply it<\/span>\n+   videoSource += `\/l_video:${transition}<\/span>,c_fill,w_600,e_transition\/fl_layer_apply`<\/span>;\n\n    \/\/ set the public ID to display the video as an MP4<\/span>\n    videoSource += `\/${videoOneId}<\/span>.mp4`<\/span>;\n\n    \/\/ add the full URL to a standard HTML5 video element<\/span>\n    return<\/span> (\n      <video<\/span> controls<\/span>><\/span>\n        <source<\/span> src<\/span>={videoSource}<\/span> type<\/span>=\"video\/mp4\"<\/span> \/><\/span>\n      <\/video<\/span>><\/span><\/span>\n    );\n  }\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
        Adding these two pieces to the URL gives us a generated video from Cloudinary that shows the first video, and then transitions to the second video.<\/p>\n
        Display the combined video in a React component on screen<\/h2>\n
        With our Video<\/code> component configured to combine videos with a custom transition, we\u2019re ready to display it on screen!<\/p>\n
        We can add the React component to our app like this:<\/p>\n
        function<\/span> App<\/span>(<\/span>) <\/span>{\n  return<\/span> (\n    <main<\/span>><\/span>\n      <h1<\/span>><\/span>Video Transitions with React & Cloudinary<\/h1<\/span>><\/span>\n      <Video<\/span>\n        cloudName<\/span>=\"jlengstorf\"<\/span>\n        videoOneId<\/span>=\"mediajams\/disappointed-coffee\"<\/span>\n        videoTwoId<\/span>=\"mediajams\/deploy-to-netlify\"<\/span>\n        transitionId<\/span>=\"mediajams\/transition\"<\/span>\n      \/><\/span>\n    <\/main<\/span>><\/span><\/span>\n  );\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
        Our app will now display a video that shows our first video, and then transitions into the second!<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":27948,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[134,246,371,303],"class_list":["post-27947","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-guest-post","tag-react","tag-under-review","tag-video"],"acf":[],"yoast_head":"\nAdd Custom Video Transitions with React<\/title>\n<meta name=\"description\" content=\"For added cohesion and professionalism in videos, adding transitions goes a long way. In this tutorial, we\u2019ll first look at how Cloudinary allows us to concatenate two videos together with a custom transition between them. Then, we'll learn how to display it all together in a React component.\" \/>\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\/add-custom-video-transitions-with-react-and-cloudinary\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Add Custom Video Transitions with React\" \/>\n<meta property=\"og:description\" content=\"For added cohesion and professionalism in videos, adding transitions goes a long way. In this tutorial, we\u2019ll first look at how Cloudinary allows us to concatenate two videos together with a custom transition between them. Then, we'll learn how to display it all together in a React component.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/guest_post\/add-custom-video-transitions-with-react-and-cloudinary\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2021-05-18T22:02:29+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-03-02T22:07:54+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924079\/Web_Assets\/blog\/9c055cf00d873764782c5f3c92068adb5dd35fc9-2550x1700-1_2794810783\/9c055cf00d873764782c5f3c92068adb5dd35fc9-2550x1700-1_2794810783.png?_i=AA\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/add-custom-video-transitions-with-react-and-cloudinary#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/add-custom-video-transitions-with-react-and-cloudinary\/\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Add Custom Video Transitions with React\",\"datePublished\":\"2021-05-18T22:02:29+00:00\",\"dateModified\":\"2025-03-02T22:07:54+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/add-custom-video-transitions-with-react-and-cloudinary\/\"},\"wordCount\":6,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/add-custom-video-transitions-with-react-and-cloudinary#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924079\/Web_Assets\/blog\/9c055cf00d873764782c5f3c92068adb5dd35fc9-2550x1700-1_2794810783\/9c055cf00d873764782c5f3c92068adb5dd35fc9-2550x1700-1_2794810783.png?_i=AA\",\"keywords\":[\"Guest Post\",\"React\",\"Under Review\",\"Video\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2021\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/add-custom-video-transitions-with-react-and-cloudinary\/\",\"url\":\"https:\/\/cloudinary.com\/blog\/guest_post\/add-custom-video-transitions-with-react-and-cloudinary\",\"name\":\"Add Custom Video Transitions with React\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/add-custom-video-transitions-with-react-and-cloudinary#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/add-custom-video-transitions-with-react-and-cloudinary#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924079\/Web_Assets\/blog\/9c055cf00d873764782c5f3c92068adb5dd35fc9-2550x1700-1_2794810783\/9c055cf00d873764782c5f3c92068adb5dd35fc9-2550x1700-1_2794810783.png?_i=AA\",\"datePublished\":\"2021-05-18T22:02:29+00:00\",\"dateModified\":\"2025-03-02T22:07:54+00:00\",\"description\":\"For added cohesion and professionalism in videos, adding transitions goes a long way. In this tutorial, we\u2019ll first look at how Cloudinary allows us to concatenate two videos together with a custom transition between them. Then, we'll learn how to display it all together in a React component.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/add-custom-video-transitions-with-react-and-cloudinary#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/guest_post\/add-custom-video-transitions-with-react-and-cloudinary\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/add-custom-video-transitions-with-react-and-cloudinary#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924079\/Web_Assets\/blog\/9c055cf00d873764782c5f3c92068adb5dd35fc9-2550x1700-1_2794810783\/9c055cf00d873764782c5f3c92068adb5dd35fc9-2550x1700-1_2794810783.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924079\/Web_Assets\/blog\/9c055cf00d873764782c5f3c92068adb5dd35fc9-2550x1700-1_2794810783\/9c055cf00d873764782c5f3c92068adb5dd35fc9-2550x1700-1_2794810783.png?_i=AA\",\"width\":2550,\"height\":1700},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/add-custom-video-transitions-with-react-and-cloudinary#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Add Custom Video Transitions 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":"Add Custom Video Transitions with React","description":"For added cohesion and professionalism in videos, adding transitions goes a long way. In this tutorial, we\u2019ll first look at how Cloudinary allows us to concatenate two videos together with a custom transition between them. Then, we'll learn how to display it all together in a React component.","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\/add-custom-video-transitions-with-react-and-cloudinary","og_locale":"en_US","og_type":"article","og_title":"Add Custom Video Transitions with React","og_description":"For added cohesion and professionalism in videos, adding transitions goes a long way. In this tutorial, we\u2019ll first look at how Cloudinary allows us to concatenate two videos together with a custom transition between them. Then, we'll learn how to display it all together in a React component.","og_url":"https:\/\/cloudinary.com\/blog\/guest_post\/add-custom-video-transitions-with-react-and-cloudinary","og_site_name":"Cloudinary Blog","article_published_time":"2021-05-18T22:02:29+00:00","article_modified_time":"2025-03-02T22:07:54+00:00","twitter_card":"summary_large_image","twitter_image":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924079\/Web_Assets\/blog\/9c055cf00d873764782c5f3c92068adb5dd35fc9-2550x1700-1_2794810783\/9c055cf00d873764782c5f3c92068adb5dd35fc9-2550x1700-1_2794810783.png?_i=AA","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/add-custom-video-transitions-with-react-and-cloudinary#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/add-custom-video-transitions-with-react-and-cloudinary\/"},"author":{"name":"","@id":""},"headline":"Add Custom Video Transitions with React","datePublished":"2021-05-18T22:02:29+00:00","dateModified":"2025-03-02T22:07:54+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/add-custom-video-transitions-with-react-and-cloudinary\/"},"wordCount":6,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/add-custom-video-transitions-with-react-and-cloudinary#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924079\/Web_Assets\/blog\/9c055cf00d873764782c5f3c92068adb5dd35fc9-2550x1700-1_2794810783\/9c055cf00d873764782c5f3c92068adb5dd35fc9-2550x1700-1_2794810783.png?_i=AA","keywords":["Guest Post","React","Under Review","Video"],"inLanguage":"en-US","copyrightYear":"2021","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/add-custom-video-transitions-with-react-and-cloudinary\/","url":"https:\/\/cloudinary.com\/blog\/guest_post\/add-custom-video-transitions-with-react-and-cloudinary","name":"Add Custom Video Transitions with React","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/add-custom-video-transitions-with-react-and-cloudinary#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/add-custom-video-transitions-with-react-and-cloudinary#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924079\/Web_Assets\/blog\/9c055cf00d873764782c5f3c92068adb5dd35fc9-2550x1700-1_2794810783\/9c055cf00d873764782c5f3c92068adb5dd35fc9-2550x1700-1_2794810783.png?_i=AA","datePublished":"2021-05-18T22:02:29+00:00","dateModified":"2025-03-02T22:07:54+00:00","description":"For added cohesion and professionalism in videos, adding transitions goes a long way. In this tutorial, we\u2019ll first look at how Cloudinary allows us to concatenate two videos together with a custom transition between them. Then, we'll learn how to display it all together in a React component.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/add-custom-video-transitions-with-react-and-cloudinary#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/guest_post\/add-custom-video-transitions-with-react-and-cloudinary"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/add-custom-video-transitions-with-react-and-cloudinary#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924079\/Web_Assets\/blog\/9c055cf00d873764782c5f3c92068adb5dd35fc9-2550x1700-1_2794810783\/9c055cf00d873764782c5f3c92068adb5dd35fc9-2550x1700-1_2794810783.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924079\/Web_Assets\/blog\/9c055cf00d873764782c5f3c92068adb5dd35fc9-2550x1700-1_2794810783\/9c055cf00d873764782c5f3c92068adb5dd35fc9-2550x1700-1_2794810783.png?_i=AA","width":2550,"height":1700},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/add-custom-video-transitions-with-react-and-cloudinary#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Add Custom Video Transitions 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\/v1681924079\/Web_Assets\/blog\/9c055cf00d873764782c5f3c92068adb5dd35fc9-2550x1700-1_2794810783\/9c055cf00d873764782c5f3c92068adb5dd35fc9-2550x1700-1_2794810783.png?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/27947","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=27947"}],"version-history":[{"count":3,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/27947\/revisions"}],"predecessor-version":[{"id":37089,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/27947\/revisions\/37089"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/27948"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=27947"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=27947"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=27947"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}