{"id":22326,"date":"2021-06-29T17:23:06","date_gmt":"2021-06-29T17:23:06","guid":{"rendered":"http:\/\/how_to_serve_videos_in_next_js_applications_with_cloudinary"},"modified":"2025-02-23T13:32:21","modified_gmt":"2025-02-23T21:32:21","slug":"how_to_serve_videos_in_next_js_applications_with_cloudinary","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/how_to_serve_videos_in_next_js_applications_with_cloudinary","title":{"rendered":"How to Serve Videos in Next.js Applications With Cloudinary"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><p>Videos are a powerful visual medium that fosters engagement by adding emotions and empathy. Web developers are often required to work with videos for websites or applications and must be equipped with the relevant knowledge and expertise.<\/p>\n<p>This article shows you how to add videos to a <a href=\"https:\/\/nextjs.org\/\">Next.js<\/a> app with <a href=\"https:\/\/cloudinary.com\/\">Cloudinary<\/a>.<\/p>\n<p>Next.js is a React-based front-end development framework that enables functionalities like server-side rendering, static site generation, file-system routing (with no need to manually configure <code>react-router-dom<\/code>), and API endpoints for back-end features.<\/p>\n<p>Cloudinary is a platform on which you can quickly and easily upload, store, manage, transform, and deliver images and <a href=\"https:\/\/cloudinary.com\/video_api\">videos<\/a> for websites and apps. The platform offers a vast collection of SDKs for front-end frameworks and libraries.<\/p>\n<p>This is part of a series of articles about <a href=\"https:\/\/cloudinary.com\/guides\/web-performance\/video-optimization-why-you-need-it-and-5-critical-best-practices\">video optimization<\/a>.<\/p>\n<h2>Prerequisites<\/h2>\n<p>To follow the steps in this article, you must know the basics of React.js. You also need the following:<\/p>\n<ul>\n<li>A web browser, such as Chrome, Edge, or Safari.<\/li>\n<li>Access to <a href=\"https:\/\/codesandbox.io\">CodeSandbox<\/a>, an online editor for software development.<\/li>\n<li>A Cloudinary account for video upload. <a href=\"https:\/\/cloudinary.com\/users\/register\/free\"><strong>Signup<\/strong><\/a> <strong>is completely free.<\/strong>\n<\/li>\n<\/ul>\n<h2>The Process<\/h2>\n<p>You can serve videos with Cloudinary on Next.js webpages in either of these two ways:<\/p>\n<ul>\n<li>With the <code>cloudinary-react<\/code> library, which smoothly handles runtime rendering and offers native video functionalities with the innerRef properties. This library does not require a dynamic import.<\/li>\n<li>With the <a href=\"https:\/\/github.com\/cloudinary\/cloudinary-video-player\">JavaScript SDK<\/a> of <code>cloudinary-video-player<\/code> and the <code>cloudinary-core<\/code> library. <code>cloudinary-video-player<\/code> offers Cloudinary\u2019s functionalities and built-in methods, including robust options for serving videos. Working with the player requires more code and a dynamic import.<\/li>\n<\/ul>\n<p>The sections below step you through both methods.<\/p>\n<h2>Method 1: With the cloudinary-react Library<\/h2>\n<p>First, go to <a href=\"https:\/\/codesandbox.io\">https:\/\/codesandbox.io<\/a> on a browser and click the <strong>Create Sandbox<\/strong> button. Enter Next.js in the <strong>Filter<\/strong> field and select a Next.js template from the search result. CodeSandbox will then scaffold a Next.js project.<\/p>\n<p><strong>Installing the Project Dependencies<\/strong><\/p>\n<p>Cloudinary offers an SDK for React developers to integrate images and videos into their apps. To install a dependency on <code>codesandbox<\/code>, navigate to the <strong>Dependencies<\/strong> section, type in the library name (<code>cloudinary-react<\/code> in this case), and select it to install.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/image\/upload\/w_700,c_fill,f_auto,q_auto,dpr_2.0\/Web_Assets\/blog\/configuring-cloudinary-component.png\" alt=\"Installing cloudinary-react\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1400\" height=\"729\"\/><\/p>\n<p><strong>Configuring the Cloudinary Component<\/strong><\/p>\n<p>Create a <code>components<\/code> folder in the <code>Files<\/code> directory and, in the folder, create a <code>VideoPlayer.js<\/code> file with a <code>VideoPlayer<\/code> component, as shown below:<\/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\">import<\/span> { useRef } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"react\"<\/span>;\n<span class=\"hljs-keyword\">import<\/span> { Video, CloudinaryContext } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"cloudinary-react\"<\/span>;\n  <span class=\"hljs-keyword\">const<\/span> VideoPlayer = <span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {\n  <span class=\"hljs-keyword\">const<\/span> videoRef = useRef();\n  <span class=\"hljs-keyword\">return<\/span> (\n    \n      <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Video<\/span> <span class=\"hljs-attr\">width<\/span>=<span class=\"hljs-string\">\"100%\"<\/span> <span class=\"hljs-attr\">controls<\/span> \/&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span>\n    \n  );\n};\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> VideoPlayer;\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<p>The <code>VideoPlayer<\/code> component does the following:<\/p>\n<ul>\n<li>Import the required dependencies and create a videoRef variable that gives the video component access to native HTML DOM methods and properties.<\/li>\n<li>Configure <code>CloudinaryContext<\/code> as a wrapper with <code>cloud_name<\/code> (the name of your Cloudinary account). You can think of <code>CloudinaryContext<\/code> as a parent that passes all its traits and genes to its offspring. The nested children then automatically have all the properties defined in the parent.<\/li>\n<\/ul>\n<div class='c-callout  c-callout--inline-title c-callout--note'><strong class='c-callout__title'>Note:<\/strong> <p>To get the value of <code>cloud_name<\/code>, <a href=\"https:\/\/cloudinary.com\/users\/login\">log in to your Cloudinary account<\/a>, navigate to the dashboard, and copy the value, as shown in the highlighted section below.<\/p><\/div>\n<p>The <code>Video<\/code> element in the component contains the following:<\/p>\n<ul>\n<li>\n<code>publicId<\/code>, which is a unique identifier with which Cloudinary generates the video URL.<\/li>\n<li>\n<code>controls<\/code>, which includes HTML video functionalities like play, pause, etc.<\/li>\n<li>\n<code>innerRef<\/code>, which accesses video functionalities through the <code>videoRef<\/code> variable you created earlier.<\/li>\n<\/ul>\n<p><cld-code-widget\n      class=\" c-code-widget\"\n      snippets=\"[{&quot;sdkId&quot;:&quot;nodejs&quot;,&quot;framework&quot;:&quot;nodejs&quot;,&quot;language&quot;:&quot;nodejs&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(\\&quot;dog.wav\\&quot;, {resource_type: \\&quot;video\\&quot;})&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(\\&quot;dog.wav\\&quot;, {resource_type: \\&quot;video\\&quot;})&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Node.js&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_2&quot;,&quot;framework&quot;:&quot;react_2&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryVideo(\\&quot;dog.wav\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryVideo(\\&quot;dog.wav\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;react&quot;,&quot;framework&quot;:&quot;react&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;Video publicId=\\&quot;dog.wav\\&quot; resourceType=\\&quot;video\\&quot;&gt; &lt;\\\/Video&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;Video publicId=\\&quot;dog.wav\\&quot; resourceType=\\&quot;video\\&quot;&gt;\\n\\n&lt;\\\/Video&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;cloudinary-react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue_2&quot;,&quot;framework&quot;:&quot;vue_2&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryVideo(\\&quot;dog.wav\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryVideo(\\&quot;dog.wav\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/vue&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue&quot;,&quot;framework&quot;:&quot;vue&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cld-video public-id=\\&quot;dog.wav\\&quot; resource-type=\\&quot;video\\&quot;&gt; &lt;\\\/cld-video&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cld-video public-id=\\&quot;dog.wav\\&quot; resource-type=\\&quot;video\\&quot;&gt;\\n\\n&lt;\\\/cld-video&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;cloudinary-vue&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular_2&quot;,&quot;framework&quot;:&quot;angular_2&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryVideo(\\&quot;dog.wav\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryVideo(\\&quot;dog.wav\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/ng&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular&quot;,&quot;framework&quot;:&quot;angular&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cl-video public-id=\\&quot;dog.wav\\&quot; resource-type=\\&quot;video\\&quot;&gt; &lt;\\\/cl-video&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cl-video public-id=\\&quot;dog.wav\\&quot; resource-type=\\&quot;video\\&quot;&gt;\\n\\n&lt;\\\/cl-video&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/angular-5.x&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js_2&quot;,&quot;framework&quot;:&quot;js_2&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryVideo(\\&quot;dog.wav\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryVideo(\\&quot;dog.wav\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js&quot;,&quot;framework&quot;:&quot;js&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.videoTag(&#039;dog.wav&#039;).toHtml();&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.videoTag(&#039;dog.wav&#039;).toHtml();&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;cloudinary-core&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;python&quot;,&quot;framework&quot;:&quot;python&quot;,&quot;language&quot;:&quot;python&quot;,&quot;rawCodeSnippet&quot;:&quot;CloudinaryVideo(\\&quot;dog.wav\\&quot;).image()&quot;,&quot;codeSnippet&quot;:&quot;CloudinaryVideo(\\&quot;dog.wav\\&quot;).image()&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Python&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;php_2&quot;,&quot;framework&quot;:&quot;php_2&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;(new VideoTag(&#039;dog.wav&#039;));&quot;,&quot;codeSnippet&quot;:&quot;(new VideoTag(&#039;dog.wav&#039;));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;php&quot;,&quot;framework&quot;:&quot;php&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;dog.wav\\&quot;, array(\\&quot;resource_type\\&quot;=&gt;\\&quot;video\\&quot;))&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;dog.wav\\&quot;, array(\\&quot;resource_type\\&quot;=&gt;\\&quot;video\\&quot;))&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;java&quot;,&quot;framework&quot;:&quot;java&quot;,&quot;language&quot;:&quot;java&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().resourceType(\\&quot;video\\&quot;).imageTag(\\&quot;dog.wav\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().resourceType(\\&quot;video\\&quot;).imageTag(\\&quot;dog.wav\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Java&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;ruby&quot;,&quot;framework&quot;:&quot;ruby&quot;,&quot;language&quot;:&quot;ruby&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;dog.wav\\&quot;, resource_type: \\&quot;video\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;dog.wav\\&quot;, resource_type: \\&quot;video\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Ruby&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;csharp&quot;,&quot;framework&quot;:&quot;csharp&quot;,&quot;language&quot;:&quot;csharp&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.Api.UrlVideoUp.BuildImageTag(\\&quot;dog.wav\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.Api.UrlVideoUp.BuildImageTag(\\&quot;dog.wav\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;.NET&quot;,&quot;packageName&quot;:&quot;CloudinaryDotNet&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;dart&quot;,&quot;framework&quot;:&quot;dart&quot;,&quot;language&quot;:&quot;dart&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.video(&#039;dog.wav&#039;).transformation(Transformation());&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.video(&#039;dog.wav&#039;).transformation(Transformation());&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Dart&quot;,&quot;packageName&quot;:&quot;cloudinary_dart&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;swift&quot;,&quot;framework&quot;:&quot;swift&quot;,&quot;language&quot;:&quot;swift&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.createUrl().setResourceType(\\&quot;video\\&quot;).generate(\\&quot;dog.wav\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.createUrl().setResourceType(\\&quot;video\\&quot;).generate(\\&quot;dog.wav\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;iOS&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;5.x&quot;},{&quot;sdkId&quot;:&quot;android&quot;,&quot;framework&quot;:&quot;android&quot;,&quot;language&quot;:&quot;android&quot;,&quot;rawCodeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().resourceType(\\&quot;video\\&quot;).generate(\\&quot;dog.wav\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().resourceType(\\&quot;video\\&quot;).generate(\\&quot;dog.wav\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Android&quot;,&quot;packageName&quot;:&quot;cloudinary-android&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;flutter&quot;,&quot;framework&quot;:&quot;flutter&quot;,&quot;language&quot;:&quot;flutter&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.video(&#039;dog.wav&#039;).transformation(Transformation());&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.video(&#039;dog.wav&#039;).transformation(Transformation());&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Flutter&quot;,&quot;packageName&quot;:&quot;cloudinary_flutter&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;kotlin&quot;,&quot;framework&quot;:&quot;kotlin&quot;,&quot;language&quot;:&quot;kotlin&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.video {\\n\\tpublicId(\\&quot;dog.wav\\&quot;) \\n}.generate()&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.video {\\n\\tpublicId(\\&quot;dog.wav\\&quot;) \\n}.generate()&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Kotlin&quot;,&quot;packageName&quot;:&quot;kotlin-url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;jquery&quot;,&quot;framework&quot;:&quot;jquery&quot;,&quot;language&quot;:&quot;jquery&quot;,&quot;rawCodeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;dog.wav\\&quot;, {resource_type: \\&quot;video\\&quot;})&quot;,&quot;codeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;dog.wav\\&quot;, {resource_type: \\&quot;video\\&quot;})&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;jQuery&quot;,&quot;packageName&quot;:&quot;cloudinary-jquery&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_native&quot;,&quot;framework&quot;:&quot;react_native&quot;,&quot;language&quot;:&quot;react_native&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryVideo(\\&quot;dog.wav\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryVideo(\\&quot;dog.wav\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React Native&quot;,&quot;packageName&quot;:&quot;cloudinary-react-native&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;}]\"\n      parsed-url=\"{&quot;url&quot;:&quot;https:\\\/\\\/res.cloudinary.com\\\/demo\\\/video\\\/upload\\\/dog.wav&quot;,&quot;cloud_name&quot;:&quot;demo&quot;,&quot;host&quot;:&quot;res.cloudinary.com&quot;,&quot;type&quot;:&quot;upload&quot;,&quot;resource_type&quot;:&quot;video&quot;,&quot;transformation&quot;:[],&quot;transformation_string&quot;:&quot;&quot;,&quot;url_suffix&quot;:&quot;&quot;,&quot;version&quot;:&quot;&quot;,&quot;secure&quot;:true,&quot;public_id&quot;:&quot;dog.wav&quot;,&quot;extension&quot;:&quot;wav&quot;,&quot;format&quot;:&quot;wav&quot;,&quot;format_code&quot;:true,&quot;url_code&quot;:false,&quot;signature&quot;:&quot;&quot;,&quot;private_cdn&quot;:false,&quot;result_asset_type&quot;:&quot;video&quot;}\"\n      with-url=\"true\"\n    >\n      <span class=\"u-visually-hidden\">Loading code examples<\/span>\n    <\/cld-code-widget><a class=\"c-image-link\" href=\"https:\/\/res.cloudinary.com\/demo\/video\/upload\/dog.wav\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/video\/upload\/dog.wav\" alt=\"dog\" loading=\"lazy\" class=\"c-transformed-asset\" \/><\/a>\n<em>An example of a media URL and public ID<\/em><\/p>\n<p><strong>Using the Component<\/strong><\/p>\n<p>Now add the following code to the <code>index.js<\/code> file to use the Cloudinary component:<\/p>\n<pre class=\"js-syntax-highlighted\"><code>import Head from &quot;next\/head&quot;;\nimport VideoPlayer from &quot;..\/components\/VideoPlayer&quot;;\nexport default function IndexPage() {\n  return (\n    &lt;div&gt;\n      \n        &lt;title&gt;Video Player with Cloudinary&lt;\/title&gt;\n        \n      \n      &lt;header&gt;\n        &lt;h1&gt;Video Player&lt;\/h1&gt;\n      &lt;\/header&gt;\n      &lt;section&gt;\n        &lt;p&gt;\n          There is no one who loves pain itself, who seeks after it and wants to\n          have it\n        &lt;\/p&gt;\n      &lt;\/section&gt;\n      &lt;section&gt;\n        \n      &lt;\/section&gt;\n    &lt;\/div&gt;\n  );\n}\n<\/code><\/pre>\n<p>You can now see the newly generated content and play the video.<\/p>\n<h2>Method 2: With the JavaScript SDK of the Cloudinary Video Player and the <code>cloudinary-core<\/code> Library<\/h2>\n<p>For this method, you use the same CodeSandbox you created earlier but comment out the <code>VideoPlayer<\/code> component.<\/p>\n<p><strong>Installing the Project Dependencies<\/strong><\/p>\n<p>Just as you did earlier, navigate to the <strong>Dependencies<\/strong> section and install <code>cloudinary-video-player<\/code> and the <code>cloudinary-core<\/code> library.<\/p>\n<p>To run <code>cloudinary-video-player<\/code>, you need Node.js version 12 and above. For details on how to change CodeSandbox\u2019s Node.js version, see the CodeSandbox <a href=\"https:\/\/codesandbox.io\/docs\/configuration\">documentation<\/a>.<\/p>\n<p>Configuring the cloudinary-core Component\nNext, go to the <code>components<\/code> folder and create a <code>components\/NativeVideoPlayer.js<\/code> file. Add the following code to configure Cloudinary:<\/p>\n<pre class=\"js-syntax-highlighted\"><code>import &quot;cloudinary-video-player\/dist\/cld-video-player.min.js&quot;;\nimport &quot;cloudinary-video-player\/dist\/cld-video-player.min.css&quot;;\nimport { Cloudinary } from &quot;cloudinary-core&quot;;\nimport { useEffect } from &quot;react&quot;;\nconst NativeVideoPlayer = () =&gt; {\n  const cld = new Cloudinary({ cloud_name: &quot;chuloo&quot; });\n  useEffect(() =&gt; {\n    const videoPlayer = cld.videoPlayer(&quot;video-player&quot;, {\n      muted: true,\n      controls: true\n    });\n    videoPlayer.source(&quot;video-blog\/cat&quot;);\n  });\n  return (\n    &lt;div&gt;\n      &lt;video id=&quot;video-player&quot; \/&gt;\n    &lt;\/div&gt;\n  );\n};\nexport default NativeVideoPlayer;\n<\/code><\/pre>\n<p>The above code performs these tasks:<\/p>\n<ul>\n<li>Import the required dependencies.<\/li>\n<li>Create and configure a Cloudinary instance with your cloud name.<\/li>\n<li>Configure the Cloudinary instance with an ID (required by the SDK of the Cloudinary Video Player), mute the player, activate the controls, and specify the source.<\/li>\n<\/ul>\n<p>Finally, the code returns a native HTML <code>&lt;video&gt;<\/code> element with the <code>video-player<\/code> instance.<\/p>\n<p><strong>Using the Component<\/strong><\/p>\n<p>Now add the following code to the <code>index.js<\/code> file to use the <code>cloudinary-core<\/code> component:<\/p>\n<pre class=\"js-syntax-highlighted\"><code>import Head from &quot;next\/head&quot;;\nimport styles from &quot;..\/styles\/Home.module.css&quot;;\nimport VideoPlayer from &quot;..\/components\/VideoPlayer&quot;;\nimport dynamic from &quot;next\/dynamic&quot;; \/\/add\n\n\/\/add\nconst NativeVideo = dynamic(\n  () =&gt; import(&quot;..\/components\/NativeVideoPlayer&quot;),\n  { ssr: false }\n);\nexport default function IndexPage() {\n  return (\n    &lt;div&gt;\n      \n        &lt;title&gt;Video Player with Cloudinary&lt;\/title&gt;\n        \n      \n      &lt;header&gt;\n        &lt;h1&gt;Video Player&lt;\/h1&gt;\n      &lt;\/header&gt;\n      &lt;section&gt;\n        &lt;p&gt;\n          There is no one who loves pain itself, who seeks after it and wants to\n          have it\n        &lt;\/p&gt;\n      &lt;\/section&gt;\n      &lt;section&gt;\n        {\/*  *\/}\n        \n      &lt;\/section&gt;\n    &lt;\/div&gt;\n  );\n}\n<\/code><\/pre>\n<p>The above code does the following:<\/p>\n<ul>\n<li>Import <code>dynamic<\/code>, the built-in support in Next.js for dynamically working with JavaScript modules.<\/li>\n<li>Create a <code>DynamicVideo<\/code> variable to dynamically import <code>NativeVideoPlayer<\/code> on runtime and avoid any errors thrown by the browser\u2019s window object.<\/li>\n<li>Render <code>DynamicVideo<\/code> as a component.<\/li>\n<\/ul>\n<p>You can now see the newly generated video.<\/p>\n<p>Related content: Read our guide to <a href=\"https:\/\/cloudinary.com\/guides\/video-formats\/what-are-video-subtitles-common-formats-and-best-practices\">video subtitles<\/a> and <a href=\"https:\/\/cloudinary.com\/blog\/muted_videos_and_subtitles\">muted videos<\/a>.<\/p>\n<h2>Conclusion<\/h2>\n<p>Serving videos with Cloudinary on Next.js webpages is a seamless, intuitive process.  For more details on the code examples cited in this post, see the <a href=\"https:\/\/codesandbox.io\/s\/great-sun-f9b7l?file=\/pages\/index.js\">complete source code<\/a> on CodeSandbox.<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":22327,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[212,246,303,305],"class_list":["post-22326","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-next-js","tag-react","tag-video","tag-video-api"],"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>How to Serve Videos in Next.js Web Apps With Cloudinary<\/title>\n<meta name=\"description\" content=\"Learn how to add videos to Next.js webpages with either Cloudinary&#039;s cloudinary-react library or with the JavaScript SDK of the Cloudinary 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\/how_to_serve_videos_in_next_js_applications_with_cloudinary\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Serve Videos in Next.js Applications With Cloudinary\" \/>\n<meta property=\"og:description\" content=\"Learn how to add videos to Next.js webpages with either Cloudinary&#039;s cloudinary-react library or with the JavaScript SDK of the Cloudinary Video Player.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/how_to_serve_videos_in_next_js_applications_with_cloudinary\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2021-06-29T17:23:06+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-02-23T21:32:21+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1649719165\/Web_Assets\/blog\/video-served-in-nextjs_22327660fa\/video-served-in-nextjs_22327660fa-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\/how_to_serve_videos_in_next_js_applications_with_cloudinary#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/how_to_serve_videos_in_next_js_applications_with_cloudinary\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"How to Serve Videos in Next.js Applications With Cloudinary\",\"datePublished\":\"2021-06-29T17:23:06+00:00\",\"dateModified\":\"2025-02-23T21:32:21+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/how_to_serve_videos_in_next_js_applications_with_cloudinary\"},\"wordCount\":10,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/how_to_serve_videos_in_next_js_applications_with_cloudinary#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649719165\/Web_Assets\/blog\/video-served-in-nextjs_22327660fa\/video-served-in-nextjs_22327660fa.png?_i=AA\",\"keywords\":[\"Next.js\",\"React\",\"Video\",\"Video API\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2021\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/how_to_serve_videos_in_next_js_applications_with_cloudinary\",\"url\":\"https:\/\/cloudinary.com\/blog\/how_to_serve_videos_in_next_js_applications_with_cloudinary\",\"name\":\"How to Serve Videos in Next.js Web Apps With Cloudinary\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/how_to_serve_videos_in_next_js_applications_with_cloudinary#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/how_to_serve_videos_in_next_js_applications_with_cloudinary#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649719165\/Web_Assets\/blog\/video-served-in-nextjs_22327660fa\/video-served-in-nextjs_22327660fa.png?_i=AA\",\"datePublished\":\"2021-06-29T17:23:06+00:00\",\"dateModified\":\"2025-02-23T21:32:21+00:00\",\"description\":\"Learn how to add videos to Next.js webpages with either Cloudinary's cloudinary-react library or with the JavaScript SDK of the Cloudinary Video Player.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/how_to_serve_videos_in_next_js_applications_with_cloudinary#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/how_to_serve_videos_in_next_js_applications_with_cloudinary\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/how_to_serve_videos_in_next_js_applications_with_cloudinary#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649719165\/Web_Assets\/blog\/video-served-in-nextjs_22327660fa\/video-served-in-nextjs_22327660fa.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649719165\/Web_Assets\/blog\/video-served-in-nextjs_22327660fa\/video-served-in-nextjs_22327660fa.png?_i=AA\",\"width\":1540,\"height\":847},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/how_to_serve_videos_in_next_js_applications_with_cloudinary#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Serve Videos in Next.js Applications With Cloudinary\"}]},{\"@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":"How to Serve Videos in Next.js Web Apps With Cloudinary","description":"Learn how to add videos to Next.js webpages with either Cloudinary's cloudinary-react library or with the JavaScript SDK of the Cloudinary 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\/how_to_serve_videos_in_next_js_applications_with_cloudinary","og_locale":"en_US","og_type":"article","og_title":"How to Serve Videos in Next.js Applications With Cloudinary","og_description":"Learn how to add videos to Next.js webpages with either Cloudinary's cloudinary-react library or with the JavaScript SDK of the Cloudinary Video Player.","og_url":"https:\/\/cloudinary.com\/blog\/how_to_serve_videos_in_next_js_applications_with_cloudinary","og_site_name":"Cloudinary Blog","article_published_time":"2021-06-29T17:23:06+00:00","article_modified_time":"2025-02-23T21:32:21+00:00","og_image":[{"width":1540,"height":847,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1649719165\/Web_Assets\/blog\/video-served-in-nextjs_22327660fa\/video-served-in-nextjs_22327660fa-png?_i=AA","type":"image\/png"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/how_to_serve_videos_in_next_js_applications_with_cloudinary#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/how_to_serve_videos_in_next_js_applications_with_cloudinary"},"author":{"name":"","@id":""},"headline":"How to Serve Videos in Next.js Applications With Cloudinary","datePublished":"2021-06-29T17:23:06+00:00","dateModified":"2025-02-23T21:32:21+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/how_to_serve_videos_in_next_js_applications_with_cloudinary"},"wordCount":10,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/how_to_serve_videos_in_next_js_applications_with_cloudinary#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649719165\/Web_Assets\/blog\/video-served-in-nextjs_22327660fa\/video-served-in-nextjs_22327660fa.png?_i=AA","keywords":["Next.js","React","Video","Video API"],"inLanguage":"en-US","copyrightYear":"2021","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/how_to_serve_videos_in_next_js_applications_with_cloudinary","url":"https:\/\/cloudinary.com\/blog\/how_to_serve_videos_in_next_js_applications_with_cloudinary","name":"How to Serve Videos in Next.js Web Apps With Cloudinary","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/how_to_serve_videos_in_next_js_applications_with_cloudinary#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/how_to_serve_videos_in_next_js_applications_with_cloudinary#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649719165\/Web_Assets\/blog\/video-served-in-nextjs_22327660fa\/video-served-in-nextjs_22327660fa.png?_i=AA","datePublished":"2021-06-29T17:23:06+00:00","dateModified":"2025-02-23T21:32:21+00:00","description":"Learn how to add videos to Next.js webpages with either Cloudinary's cloudinary-react library or with the JavaScript SDK of the Cloudinary Video Player.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/how_to_serve_videos_in_next_js_applications_with_cloudinary#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/how_to_serve_videos_in_next_js_applications_with_cloudinary"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/how_to_serve_videos_in_next_js_applications_with_cloudinary#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649719165\/Web_Assets\/blog\/video-served-in-nextjs_22327660fa\/video-served-in-nextjs_22327660fa.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649719165\/Web_Assets\/blog\/video-served-in-nextjs_22327660fa\/video-served-in-nextjs_22327660fa.png?_i=AA","width":1540,"height":847},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/how_to_serve_videos_in_next_js_applications_with_cloudinary#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Serve Videos in Next.js Applications With Cloudinary"}]},{"@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\/v1649719165\/Web_Assets\/blog\/video-served-in-nextjs_22327660fa\/video-served-in-nextjs_22327660fa.png?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/22326","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=22326"}],"version-history":[{"count":15,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/22326\/revisions"}],"predecessor-version":[{"id":36975,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/22326\/revisions\/36975"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/22327"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=22326"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=22326"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=22326"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}