{"id":31579,"date":"2023-10-31T07:00:00","date_gmt":"2023-10-31T14:00:00","guid":{"rendered":"https:\/\/cloudinary.com\/blog\/?p=31579"},"modified":"2025-02-21T14:07:58","modified_gmt":"2025-02-21T22:07:58","slug":"embedding-video-player-next-js-next-cloudinary","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/embedding-video-player-next-js-next-cloudinary","title":{"rendered":"Embedding a Video Player in Next.js With Next Cloudinary"},"content":{"rendered":"\n<p>In the realm of dynamic web applications, embedding videos can often seem like a challenge, particularly if you wish to do this while retaining control over the playing experience and customizing it to fit your brand. However, the task becomes a breeze in Next.js with the introduction of the Cloudinary CldVideoPlayer component.<br><br>In this Dev Hint, we&#8217;ll cover how you can effortlessly add a video to your Next.js application using <a href=\"\" target=\"_blank\" rel=\"noreferrer noopener\">Cloudinary&#8217;s CldVideoPlayer component<\/a>, including customizing its appearance. Let&#8217;s dive into this together!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Getting Started With the Cloudinary CldVideoPlayer Component<\/h2>\n\n\n\n<p>To get started with the Cloudinary CldVideoPlayer Component, install Next Cloudinary using either <code>yarn<\/code> or <code>npm<\/code> by running one of the following commands:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php shcb-wrap-lines\"><span class=\"hljs-comment\"># Using Yarn<\/span>\nyarn add next-cloudinary\n\n<span class=\"hljs-comment\"># Using npm<\/span>\nnpm install next-cloudinary\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>This will set up the necessary tools to work with Cloudinary&#8217;s video player component in your Next.js project.<br><br>Next, navigate to the page in your Next.js project where you&#8217;d like to display the video player and import the <code>CldVideoPlayer <\/code>component from <code>next-cloudinary<\/code> as follows:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">import<\/span> { CldVideoPlayer } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'next-cloudinary'<\/span>;\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>To embed a video using the Cloudinary CldVideoPlayer Component, start by adding the video component. Assign it an ID and set its dimensions using the width and height properties, with values of <code>1920<\/code> and <code>1080<\/code>, respectively.<br><br>To display a video, we&#8217;ll use the sample video &#8220;sea-turtle&#8221;, which is automatically available with every new Cloudinary account. You can do this by specifying it as the src prop <code>samples\/sea-turtle<\/code> as highlighted below:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">CldVideoPlayer<\/span>\n    <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"sea-turtle-color\"<\/span>\n    <span class=\"hljs-attr\">width<\/span>=<span class=\"hljs-string\">\"1920\"<\/span>\n    <span class=\"hljs-attr\">height<\/span>=<span class=\"hljs-string\">\"1080\"<\/span>\n    <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"samples\/sea-turtle\"<\/span>\n\/&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>On refreshing the page, the desired video player displays our Sea Turtle video as highlighted below.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img width=\"1024\" height=\"576\" data-public-id=\"Web_Assets\/blog\/Blog_Embedding-a-Video-Player-in-Next.js-With-Next-Cloudinary_1\/Blog_Embedding-a-Video-Player-in-Next.js-With-Next-Cloudinary_1.png\" loading=\"lazy\" decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/w_1024,h_576,c_scale\/f_auto,q_auto\/v1698105877\/Web_Assets\/blog\/Blog_Embedding-a-Video-Player-in-Next.js-With-Next-Cloudinary_1\/Blog_Embedding-a-Video-Player-in-Next.js-With-Next-Cloudinary_1.png?_i=AA\" alt=\"\" class=\"wp-post-31579 wp-image-31580\" data-format=\"png\" data-transformations=\"f_auto,q_auto\" data-version=\"1698105877\" data-seo=\"1\" srcset=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1698105877\/Web_Assets\/blog\/Blog_Embedding-a-Video-Player-in-Next.js-With-Next-Cloudinary_1\/Blog_Embedding-a-Video-Player-in-Next.js-With-Next-Cloudinary_1.png?_i=AA 1280w, https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1698105877\/Web_Assets\/blog\/Blog_Embedding-a-Video-Player-in-Next.js-With-Next-Cloudinary_1\/Blog_Embedding-a-Video-Player-in-Next.js-With-Next-Cloudinary_1.png?_i=AA 300w, https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1698105877\/Web_Assets\/blog\/Blog_Embedding-a-Video-Player-in-Next.js-With-Next-Cloudinary_1\/Blog_Embedding-a-Video-Player-in-Next.js-With-Next-Cloudinary_1.png?_i=AA 768w, https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1698105877\/Web_Assets\/blog\/Blog_Embedding-a-Video-Player-in-Next.js-With-Next-Cloudinary_1\/Blog_Embedding-a-Video-Player-in-Next.js-With-Next-Cloudinary_1.png?_i=AA 1024w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Customizing the Video Player<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img width=\"1024\" height=\"576\" data-public-id=\"Web_Assets\/blog\/Blog_Embedding-a-Video-Player-in-Next.js-With-Next-Cloudinary_2\/Blog_Embedding-a-Video-Player-in-Next.js-With-Next-Cloudinary_2.png\" loading=\"lazy\" decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/w_1024,h_576,c_scale\/f_auto,q_auto\/v1698105872\/Web_Assets\/blog\/Blog_Embedding-a-Video-Player-in-Next.js-With-Next-Cloudinary_2\/Blog_Embedding-a-Video-Player-in-Next.js-With-Next-Cloudinary_2.png?_i=AA\" alt=\"\" class=\"wp-post-31579 wp-image-31581\" data-format=\"png\" data-transformations=\"f_auto,q_auto\" data-version=\"1698105872\" data-seo=\"1\" srcset=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1698105872\/Web_Assets\/blog\/Blog_Embedding-a-Video-Player-in-Next.js-With-Next-Cloudinary_2\/Blog_Embedding-a-Video-Player-in-Next.js-With-Next-Cloudinary_2.png?_i=AA 1280w, https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1698105872\/Web_Assets\/blog\/Blog_Embedding-a-Video-Player-in-Next.js-With-Next-Cloudinary_2\/Blog_Embedding-a-Video-Player-in-Next.js-With-Next-Cloudinary_2.png?_i=AA 300w, https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1698105872\/Web_Assets\/blog\/Blog_Embedding-a-Video-Player-in-Next.js-With-Next-Cloudinary_2\/Blog_Embedding-a-Video-Player-in-Next.js-With-Next-Cloudinary_2.png?_i=AA 768w, https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1698105872\/Web_Assets\/blog\/Blog_Embedding-a-Video-Player-in-Next.js-With-Next-Cloudinary_2\/Blog_Embedding-a-Video-Player-in-Next.js-With-Next-Cloudinary_2.png?_i=AA 1024w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Embedding a video player is a straightforward process, but the Cloudinary CldVideoPlayer real magic lies in its vast array of <a href=\"https:\/\/next.cloudinary.dev\/cldvideoplayer\/basic-usage#customization\" target=\"_blank\" rel=\"noreferrer noopener\">customization features<\/a>. After adding a basic video player to your application, it&#8217;s time to wield the full power of customization that comes with the CldVideoPlayer to align the player with your brand colors and desired aesthetics.<br><br>To customize colors, we simply override the existing colors using the <code>colors<\/code> prop. This prop allows us to replace three colors: base, text, and accent. You can set these to match your branding. In our example, we&#8217;ll set the base color to green, text to black, and the accent color to white.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">&lt;CldVideoPlayer\n  id=<span class=\"hljs-string\">\"sea-turtle-color\"<\/span>\n  width=<span class=\"hljs-string\">\"1920\"<\/span>\n  height=<span class=\"hljs-string\">\"1080\"<\/span>\n  src=<span class=\"hljs-string\">\"samples\/sea-turtle\"<\/span>\n  colors={{\n    <span class=\"hljs-attr\">base<\/span>: <span class=\"hljs-string\">\"#0f0\"<\/span>,\n    <span class=\"hljs-attr\">text<\/span>: <span class=\"hljs-string\">\"#000\"<\/span>,\n    <span class=\"hljs-attr\">accent<\/span>: <span class=\"hljs-string\">\"#fff\"<\/span>\n  }}\n\/&gt;\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><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\n\n<p>Upon refreshing the page, the changes will be instantly implemented. To further customize the player, like changing the font or adding your logo, you can check out examples in the <a href=\"https:\/\/next.cloudinary.dev\/cldvideoplayer\/examples\" target=\"_blank\" rel=\"noreferrer noopener\">Cloudinary documentation<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Recap and Review<\/h2>\n\n\n\n<p>In conclusion, embedding videos in your Next.js application using the Cloudinary CldVideoPlayer component is simplicity itself, demanding no more than a few lines of code for even a novice programmer.<br><br>Incorporate videos into your Next.js application with ease and transform your user experience, one video at a time!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In the realm of dynamic web applications, embedding videos can often seem like a challenge, particularly if you wish to do this while retaining control over the playing experience and customizing it to fit your brand. However, the task becomes a breeze in Next.js with the introduction of the Cloudinary CldVideoPlayer component. In this Dev [&hellip;]<\/p>\n","protected":false},"author":87,"featured_media":31713,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[212,303],"class_list":["post-31579","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-next-js","tag-video"],"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>Embedding a Video Player in Next.js With Next Cloudinary<\/title>\n<meta name=\"description\" content=\"Learn how you can effortlessly add a video to your Next.js application using Cloudinary&#039;s CldVideoPlayer component, including customizing its appearance.\" \/>\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\/embedding-video-player-next-js-next-cloudinary\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Embedding a Video Player in Next.js With Next Cloudinary\" \/>\n<meta property=\"og:description\" content=\"Learn how you can effortlessly add a video to your Next.js application using Cloudinary&#039;s CldVideoPlayer component, including customizing its appearance.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/embedding-video-player-next-js-next-cloudinary\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2023-10-31T14:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-02-21T22:07:58+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1698169145\/Blog-video_player_nextjs\/Blog-video_player_nextjs-jpg?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"2000\" \/>\n\t<meta property=\"og:image:height\" content=\"1100\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"melindapham\" \/>\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\/embedding-video-player-next-js-next-cloudinary#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/embedding-video-player-next-js-next-cloudinary\"},\"author\":{\"name\":\"melindapham\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9\"},\"headline\":\"Embedding a Video Player in Next.js With Next Cloudinary\",\"datePublished\":\"2023-10-31T14:00:00+00:00\",\"dateModified\":\"2025-02-21T22:07:58+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/embedding-video-player-next-js-next-cloudinary\"},\"wordCount\":453,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/embedding-video-player-next-js-next-cloudinary#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1698169145\/Blog-video_player_nextjs\/Blog-video_player_nextjs.jpg?_i=AA\",\"keywords\":[\"Next.js\",\"Video\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2023\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/embedding-video-player-next-js-next-cloudinary\",\"url\":\"https:\/\/cloudinary.com\/blog\/embedding-video-player-next-js-next-cloudinary\",\"name\":\"Embedding a Video Player in Next.js With Next Cloudinary\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/embedding-video-player-next-js-next-cloudinary#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/embedding-video-player-next-js-next-cloudinary#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1698169145\/Blog-video_player_nextjs\/Blog-video_player_nextjs.jpg?_i=AA\",\"datePublished\":\"2023-10-31T14:00:00+00:00\",\"dateModified\":\"2025-02-21T22:07:58+00:00\",\"description\":\"Learn how you can effortlessly add a video to your Next.js application using Cloudinary's CldVideoPlayer component, including customizing its appearance.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/embedding-video-player-next-js-next-cloudinary#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/embedding-video-player-next-js-next-cloudinary\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/embedding-video-player-next-js-next-cloudinary#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1698169145\/Blog-video_player_nextjs\/Blog-video_player_nextjs.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1698169145\/Blog-video_player_nextjs\/Blog-video_player_nextjs.jpg?_i=AA\",\"width\":2000,\"height\":1100},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/embedding-video-player-next-js-next-cloudinary#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Embedding a Video Player in Next.js With Next 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\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9\",\"name\":\"melindapham\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g\",\"caption\":\"melindapham\"}}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Embedding a Video Player in Next.js With Next Cloudinary","description":"Learn how you can effortlessly add a video to your Next.js application using Cloudinary's CldVideoPlayer component, including customizing its appearance.","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\/embedding-video-player-next-js-next-cloudinary","og_locale":"en_US","og_type":"article","og_title":"Embedding a Video Player in Next.js With Next Cloudinary","og_description":"Learn how you can effortlessly add a video to your Next.js application using Cloudinary's CldVideoPlayer component, including customizing its appearance.","og_url":"https:\/\/cloudinary.com\/blog\/embedding-video-player-next-js-next-cloudinary","og_site_name":"Cloudinary Blog","article_published_time":"2023-10-31T14:00:00+00:00","article_modified_time":"2025-02-21T22:07:58+00:00","og_image":[{"width":2000,"height":1100,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1698169145\/Blog-video_player_nextjs\/Blog-video_player_nextjs-jpg?_i=AA","type":"image\/jpeg"}],"author":"melindapham","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/embedding-video-player-next-js-next-cloudinary#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/embedding-video-player-next-js-next-cloudinary"},"author":{"name":"melindapham","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9"},"headline":"Embedding a Video Player in Next.js With Next Cloudinary","datePublished":"2023-10-31T14:00:00+00:00","dateModified":"2025-02-21T22:07:58+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/embedding-video-player-next-js-next-cloudinary"},"wordCount":453,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/embedding-video-player-next-js-next-cloudinary#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1698169145\/Blog-video_player_nextjs\/Blog-video_player_nextjs.jpg?_i=AA","keywords":["Next.js","Video"],"inLanguage":"en-US","copyrightYear":"2023","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/embedding-video-player-next-js-next-cloudinary","url":"https:\/\/cloudinary.com\/blog\/embedding-video-player-next-js-next-cloudinary","name":"Embedding a Video Player in Next.js With Next Cloudinary","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/embedding-video-player-next-js-next-cloudinary#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/embedding-video-player-next-js-next-cloudinary#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1698169145\/Blog-video_player_nextjs\/Blog-video_player_nextjs.jpg?_i=AA","datePublished":"2023-10-31T14:00:00+00:00","dateModified":"2025-02-21T22:07:58+00:00","description":"Learn how you can effortlessly add a video to your Next.js application using Cloudinary's CldVideoPlayer component, including customizing its appearance.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/embedding-video-player-next-js-next-cloudinary#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/embedding-video-player-next-js-next-cloudinary"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/embedding-video-player-next-js-next-cloudinary#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1698169145\/Blog-video_player_nextjs\/Blog-video_player_nextjs.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1698169145\/Blog-video_player_nextjs\/Blog-video_player_nextjs.jpg?_i=AA","width":2000,"height":1100},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/embedding-video-player-next-js-next-cloudinary#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Embedding a Video Player in Next.js With Next 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":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9","name":"melindapham","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g","caption":"melindapham"}}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1698169145\/Blog-video_player_nextjs\/Blog-video_player_nextjs.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/31579","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\/87"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=31579"}],"version-history":[{"count":6,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/31579\/revisions"}],"predecessor-version":[{"id":36909,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/31579\/revisions\/36909"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/31713"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=31579"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=31579"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=31579"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}