{"id":28540,"date":"2022-09-19T16:57:41","date_gmt":"2022-09-19T16:57:41","guid":{"rendered":"http:\/\/youtube-like-click-to-unmute-feature-in-nextjs"},"modified":"2025-04-16T14:47:39","modified_gmt":"2025-04-16T21:47:39","slug":"youtube-like-click-to-unmute-feature-in-nextjs","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/youtube-like-click-to-unmute-feature-in-nextjs\/","title":{"rendered":"Youtube-like &quot;Click to Unmute&quot; Feature in NextJS"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><h1>Introduction<\/h1>\n<p>When you\u2019re about to watch a YouTube video on a mobile device, at first, the video is on mute. Then you\u2019d see a button at the top left corner for unmuting the video.<\/p>\n<p>This article will walk you through implementing that feature using video events in Next.js.<\/p>\n<h1>Sandbox<\/h1>\n<p>The completed project is on <a href=\"https:\/\/codesandbox.io\/s\/create-youtube-like-click-to-unmute-feature-in-next-js-iwqtx1\">Code<\/a><a href=\"https:\/\/codesandbox.io\/s\/create-youtube-like-click-to-unmute-feature-in-next-js-iwqtx1\">S<\/a><a href=\"https:\/\/codesandbox.io\/s\/create-youtube-like-click-to-unmute-feature-in-next-js-iwqtx1\">andbox<\/a>. Fork it and run the code.<\/p>\n<\/div>\n\n\n  <div class=\"wp-block-cloudinary-code-sandbox \">\n    <iframe\n      src=\"https:\/\/codesandbox.io\/embed\/create-youtube-like-click-to-unmute-feature-in-next-js-iwqtx1?theme=dark&amp;codemirror=1&amp;highlights=&amp;editorsize=50&amp;fontsize=14&amp;expanddevtools=0&amp;hidedevtools=0&amp;eslint=0&amp;forcerefresh=0&amp;hidenavigation=0&amp;initialpath=%2F&amp;module=&amp;moduleview=0&amp;previewwindow=&amp;view=&amp;runonclick=1\"\n      height=\"500\"\n      style=\"width: 100%;\"\n      title=\"Create youtube-like click to unmute feature in Next.js\"\n      loading=\"lazy\"\n      allow=\"accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking\"\n      sandbox=\"allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts\"\n    ><\/iframe>\n  <\/div>\n\n\n<div class=\"wp-block-cloudinary-markdown \"><h1>GitHub repository<\/h1>\n<p><a href=\"https:\/\/github.com\/folucode\/click-to-unmute-nextjs-demo\">https:\/\/github.com\/folucode\/click-to-unmute-nextjs-demo<\/a><\/p>\n<h1>Prerequisite<\/h1>\n<p>To follow through with this article, we need to have:<\/p>\n<ul>\n<li>An understanding of JavaScript and Next.js.<\/li>\n<li>A <a href=\"https:\/\/cloudinary.com\/users\/register\/free\">Cloudinary Account<\/a>. You can create a free one if you don\u2019t already have one.<\/li>\n<\/ul>\n<h1>Project Setup<\/h1>\n<p><a href=\"https:\/\/nodejs.org\/en\/\">Node<\/a> and its package manager <a href=\"https:\/\/www.npmjs.com\/\">npm<\/a> are required to initialize a new project.<\/p>\n<p>Using npm would require that we download the package to our computer before using it, but npm comes with an executor called npx.<\/p>\n<p>npx stands for Node Package Execute. It allows us to execute any package we want from the npm registry without installing it.<\/p>\n<p>To install Node, we go to the <a href=\"https:\/\/nodejs.org\/en\/\">Nodejs website<\/a> and follow the instructions. We verify Node.js\u2019 installation using the terminal command below:<\/p>\n<pre><code>node -v\nv16.10.0 \/\/node version installed\n<\/code><\/pre>\n<p>The result shows the version of Node.js we installed on our computer.<\/p>\n<h1>Create a Next.js application<\/h1>\n<p>We\u2019ll create our Next.js app using <code>create-next-app<\/code>, which automatically sets up a boilerplate Next.js app. To create a new project, run:<\/p>\n<pre><code>npx create-next-app@latest &lt;app-name&gt;\n# or\nyarn create next-app &lt;app-name&gt;\n<\/code><\/pre>\n<p>After the installation is complete, change directory into the app we just created:<\/p>\n<pre><code>cd &lt;app-name&gt;\n<\/code><\/pre>\n<p>Now we run <code>npm run dev<\/code> or <code>yarn dev<\/code> to start the development server on <code>http:\/\/localhost:3000<\/code>.<\/p>\n<h2><\/h2>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_D6D02CF8B03C42412210DCFD6E1CDFF5C06A3DC4D7010024897EEBF1E682B292_1648074761781_nextjs-app.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"2000\" height=\"1251\"\/><\/p>\n<h1>Installing Cloudinary<\/h1>\n<p><a href=\"https:\/\/cloudinary.com\/\">Cloudinary<\/a> provides a rich media management experience enabling users to upload, store, manage, manipulate, and deliver images and videos for websites and applications.<\/p>\n<p>Due to the performance benefits of serving images from an optimized Content Delivery Network, we\u2019ll use images stored on Cloudinary.\nWe\u2019ll utilize the <a href=\"https:\/\/www.npmjs.com\/package\/react-cloudinary\">Cloudinary-react package<\/a> to render Cloudinary videos on a page. We Install the cloudinary-react package in the project using npm by running the following command in the project\u2019s root directory:<\/p>\n<pre><code>npm i cloudinary-react\n<\/code><\/pre>\n<p>With installations completed, we\u2019ll start the react application using the command below:<\/p>\n<pre><code>npm run dev\n<\/code><\/pre>\n<p>Once run, the command spins up a local development server which we can access on <a href=\"http:\/\/localhost:3000\">http:\/\/localhost:3000<\/a>.<\/p>\n<h1><strong>Rendering the parent video component<\/strong><\/h1>\n<p>In the \u201cindex.js\u201d file in the \u201cpages\u201d folder, we replace the boilerplate code with the code below which renders a <a href=\"https:\/\/cloudinary.com\/products\/video\">Cloudinary video<\/a> .<\/p>\n<pre><code>import { Video, CloudinaryContext } from 'cloudinary-react';\n\nreturn (\n  &lt;div className='App'&gt;\n    &lt;h1&gt;Create youtube-like `click to unmute` feature in Next.js&lt;\/h1&gt;\n    &lt;div className='video-area'&gt;\n      &lt;CloudinaryContext cloudName='chukwutosin'&gt;\n        &lt;Video\n          publicId='Dog_Barking'\n          controls\n          muted={true}\n          width='500px'\n          innerRef={videoRef}\n          autoPlay\n        \/&gt;\n      &lt;\/CloudinaryContext&gt;\n    &lt;\/div&gt;\n  &lt;\/div&gt;\n);\n}\n<\/code><\/pre>\n<p>In the code above, we first imported the <code>Video<\/code> component that renders the video onto the page and <code>CloudinaryContext<\/code>. This component takes props of any data we want to make available to its child Cloudinary components.<\/p>\n<p>The <code>cloudName<\/code> prop is our Cloudinary cloud name which we get from our Cloudinary dashboard.<\/p>\n<p>We use the <code>Video<\/code> component to render a 500px wide video player\u200a, having controls, and is muted on playback. We then pass a prop called <code>publicId<\/code>, which is the public ID of the video we want to render. A public ID is a unique identifier for a media asset stored on Cloudinary.<\/p>\n<p>The rendered video should look like this:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_EBE76EFB3A4BDA56DF4B5037999E69C91DCF4B036C2B682D98659233655DEC72_1650040930498_demo+image.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1637\" height=\"842\"\/><\/p>\n<h1>Accessing the methods and properties of the video<\/h1>\n<p>We can seamlessly access the methods and properties of the video element using the innerRef prop provided by the <a href=\"https:\/\/www.npmjs.com\/package\/react-cloudinary\">cloudinary-react package<\/a>.<\/p>\n<p>By creating a reference using React\u2019s useRef() hook and assigning it to the innerRef property, we can utilize the properties and methods of the underlying video element. Subsequently, all the video element\u2019s available properties and methods will be on the .current property of the ref.<\/p>\n<p>We create a ref and assign it with:<\/p>\n<pre><code>import { useRef } from 'react'; \/\/ change 1\nimport { Video, CloudinaryContext } from 'cloudinary-react';\n\nexport default function IndexPage() {\n  const videoRef = useRef(); \/\/ change 2\n\n  return (\n    &lt;div className='App'&gt;\n      &lt;h1&gt;Create youtube-like `click to unmute` feature in Next.js&lt;\/h1&gt;\n      &lt;div className='video-area'&gt;\n        &lt;CloudinaryContext cloudName='chukwutosin'&gt;\n          &lt;Video\n            publicId='Dog_Barking'\n            controls\n            muted\n            width='500px'\n            innerRef={videoRef} \/\/ change 3\n            autoPlay\n          \/&gt;\n        &lt;\/CloudinaryContext&gt;\n      &lt;\/div&gt;\n    &lt;\/div&gt;\n  );\n}\n<\/code><\/pre>\n<h2>Managing video events<\/h2>\n<p>When the video playback starts, the video is on mute, and then once the unmute button is clicked, we trigger an event on the video.<\/p>\n<p>Using HTML\u2019s video events, we\u2019ll change the state of the video player.<\/p>\n<p>We create a function to handle the event change with:<\/p>\n<pre><code>import { Video, CloudinaryContext } from &quot;cloudinary-react&quot;;\nimport { useRef } from &quot;react&quot;;\n\nexport default function IndexPage() {\n  const videoRef = useRef();\n\n   const unmute = () =&gt; {\n     let video = videoRef.current;\n     video.muted = false;\n   };\n\n  return (\n    \/\/ render component here\n  );\n}\n<\/code><\/pre>\n<p>First, we created a function name <code>unmute<\/code> to handle the change of event value on the video when a button is clicked.<\/p>\n<p>We then get the current video with the <code>.current<\/code> property of the ref. Next, we update the <code>muted<\/code> event of the video to <code>false<\/code>.<\/p>\n<h1>Attaching the unmute function to a button<\/h1>\n<p>We start by creating a regular HTML button element with a value of <code>unmute<\/code> and then add an <code>onClick<\/code> handler like so:<\/p>\n<pre><code>import { useRef } from 'react';\nimport { Video, CloudinaryContext } from 'cloudinary-react';\n\nexport default function IndexPage() {\n  ...\n\n  return (\n    &lt;div className='App'&gt;\n      ...\n      &lt;div className='button-area'&gt;\n        &lt;button type='button' onClick={() =&gt; unmute()}&gt;\n          unmute\n        &lt;\/button&gt;\n      &lt;\/div&gt;\n      ...\n  );\n}\n<\/code><\/pre>\n<p>The unmute function is put in an arrow function so it won\u2019t be called immediately after the component renders.<\/p>\n<p>We need to properly style our app to align the different elements, especially the unmute button. We want the button to sit on the video element in the top left corner.<\/p>\n<p>We do this by deleting the boilerplate styles in the globals.css file in the styles folders and then adding the following styles:<\/p>\n<pre><code>.App {\n  font-family: Cambria, Cochin, Georgia, Times, &quot;Times New Roman&quot;, serif;\n  text-align: center;\n  margin: 0;\n  padding: 0;\n  width: auto;\n  height: 100vh;\n}\nh3 {\n  color: rgb(46, 44, 44);\n}\n.video-area {\n  position: relative;\n  width: 500px;\n  margin: auto;\n  left: calc(50% \u2014 200px);\n}\n.button-area {\n  left: 50%;\n  margin-left: -250px;\n  width: 55px;\n  height: 20px;\n  padding: 5px;\n  position: absolute;\n  z-index: 1;\n  background: rgba(0, 0, 0, 0.6);\n}\nbutton {\n  text-align: center;\n  border: solid 1px rgb(255, 255, 255);\n  width: 100%;\n  height: 20px;\n}\n<\/code><\/pre>\n<p>The styles will be automatically added to our component by Next.js.<\/p>\n<p>After completing that step, we should see our app look like this:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_EBE76EFB3A4BDA56DF4B5037999E69C91DCF4B036C2B682D98659233655DEC72_1650042496961_fullscreen.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"2000\" height=\"1193\"\/><\/p>\n<p>Now, once our video starts playing, it is muted and immediately the unmute button is clicked, the video is then unmuted.<\/p>\n<h1>Conclusion<\/h1>\n<p>This article addressed utilizing video events to create, mute, and unmute a video when it starts playing and when a button is clicked.<\/p>\n<h1>Resources<\/h1>\n<p>You may find these resources helpful.<\/p>\n<ul>\n<li>\n<a href=\"https:\/\/www.w3schools.com\/tags\/ref_av_dom.asp\">HTML Audio\/Video DOM Reference<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/nextjs.org\/docs\">Next.js documentation<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/www.w3schools.com\/css\/css_positioning.asp\">CSS positioning<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/documentation\">Cloudinary documentation<\/a>\n<\/li>\n<\/ul>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":28541,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[134,145,177,212,246,371],"class_list":["post-28540","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-guest-post","tag-html5","tag-javascript","tag-next-js","tag-react","tag-under-review"],"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>Youtube-like &quot;Click to Unmute&quot; Feature in NextJS<\/title>\n<meta name=\"description\" content=\"When you&#039;re about to watch a YouTube video on a mobile device, at first, the video is on mute. Then you&#039;d see a button at the top left corner for unmuting the video. This article will walk you through implementing that feature using video events in Next.js.\" \/>\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\/youtube-like-click-to-unmute-feature-in-nextjs\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Youtube-like &quot;Click to Unmute&quot; Feature in NextJS\" \/>\n<meta property=\"og:description\" content=\"When you&#039;re about to watch a YouTube video on a mobile device, at first, the video is on mute. Then you&#039;d see a button at the top left corner for unmuting the video. This article will walk you through implementing that feature using video events in Next.js.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/guest_post\/youtube-like-click-to-unmute-feature-in-nextjs\/\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-09-19T16:57:41+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-16T21:47:39+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1681923554\/Web_Assets\/blog\/e3952e6c7c6e6fcb0e8f61f64809254b58959b94-1384x680-1_285419def5\/e3952e6c7c6e6fcb0e8f61f64809254b58959b94-1384x680-1_285419def5-png?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"1384\" \/>\n\t<meta property=\"og:image:height\" content=\"680\" \/>\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\/guest_post\/youtube-like-click-to-unmute-feature-in-nextjs\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/youtube-like-click-to-unmute-feature-in-nextjs\/\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Youtube-like &quot;Click to Unmute&quot; Feature in NextJS\",\"datePublished\":\"2022-09-19T16:57:41+00:00\",\"dateModified\":\"2025-04-16T21:47:39+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/youtube-like-click-to-unmute-feature-in-nextjs\/\"},\"wordCount\":9,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/youtube-like-click-to-unmute-feature-in-nextjs\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681923554\/Web_Assets\/blog\/e3952e6c7c6e6fcb0e8f61f64809254b58959b94-1384x680-1_285419def5\/e3952e6c7c6e6fcb0e8f61f64809254b58959b94-1384x680-1_285419def5.png?_i=AA\",\"keywords\":[\"Guest Post\",\"HTML5\",\"Javascript\",\"Next.js\",\"React\",\"Under Review\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2022\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/youtube-like-click-to-unmute-feature-in-nextjs\/\",\"url\":\"https:\/\/cloudinary.com\/blog\/guest_post\/youtube-like-click-to-unmute-feature-in-nextjs\/\",\"name\":\"Youtube-like &quot;Click to Unmute&quot; Feature in NextJS\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/youtube-like-click-to-unmute-feature-in-nextjs\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/youtube-like-click-to-unmute-feature-in-nextjs\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681923554\/Web_Assets\/blog\/e3952e6c7c6e6fcb0e8f61f64809254b58959b94-1384x680-1_285419def5\/e3952e6c7c6e6fcb0e8f61f64809254b58959b94-1384x680-1_285419def5.png?_i=AA\",\"datePublished\":\"2022-09-19T16:57:41+00:00\",\"dateModified\":\"2025-04-16T21:47:39+00:00\",\"description\":\"When you're about to watch a YouTube video on a mobile device, at first, the video is on mute. Then you'd see a button at the top left corner for unmuting the video. This article will walk you through implementing that feature using video events in Next.js.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/youtube-like-click-to-unmute-feature-in-nextjs\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/guest_post\/youtube-like-click-to-unmute-feature-in-nextjs\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/youtube-like-click-to-unmute-feature-in-nextjs\/#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681923554\/Web_Assets\/blog\/e3952e6c7c6e6fcb0e8f61f64809254b58959b94-1384x680-1_285419def5\/e3952e6c7c6e6fcb0e8f61f64809254b58959b94-1384x680-1_285419def5.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681923554\/Web_Assets\/blog\/e3952e6c7c6e6fcb0e8f61f64809254b58959b94-1384x680-1_285419def5\/e3952e6c7c6e6fcb0e8f61f64809254b58959b94-1384x680-1_285419def5.png?_i=AA\",\"width\":1384,\"height\":680},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/youtube-like-click-to-unmute-feature-in-nextjs\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Youtube-like &quot;Click to Unmute&quot; Feature in NextJS\"}]},{\"@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":"Youtube-like &quot;Click to Unmute&quot; Feature in NextJS","description":"When you're about to watch a YouTube video on a mobile device, at first, the video is on mute. Then you'd see a button at the top left corner for unmuting the video. This article will walk you through implementing that feature using video events in Next.js.","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\/youtube-like-click-to-unmute-feature-in-nextjs\/","og_locale":"en_US","og_type":"article","og_title":"Youtube-like &quot;Click to Unmute&quot; Feature in NextJS","og_description":"When you're about to watch a YouTube video on a mobile device, at first, the video is on mute. Then you'd see a button at the top left corner for unmuting the video. This article will walk you through implementing that feature using video events in Next.js.","og_url":"https:\/\/cloudinary.com\/blog\/guest_post\/youtube-like-click-to-unmute-feature-in-nextjs\/","og_site_name":"Cloudinary Blog","article_published_time":"2022-09-19T16:57:41+00:00","article_modified_time":"2025-04-16T21:47:39+00:00","og_image":[{"width":1384,"height":680,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1681923554\/Web_Assets\/blog\/e3952e6c7c6e6fcb0e8f61f64809254b58959b94-1384x680-1_285419def5\/e3952e6c7c6e6fcb0e8f61f64809254b58959b94-1384x680-1_285419def5-png?_i=AA","type":"image\/png"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/youtube-like-click-to-unmute-feature-in-nextjs\/#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/youtube-like-click-to-unmute-feature-in-nextjs\/"},"author":{"name":"","@id":""},"headline":"Youtube-like &quot;Click to Unmute&quot; Feature in NextJS","datePublished":"2022-09-19T16:57:41+00:00","dateModified":"2025-04-16T21:47:39+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/youtube-like-click-to-unmute-feature-in-nextjs\/"},"wordCount":9,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/youtube-like-click-to-unmute-feature-in-nextjs\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681923554\/Web_Assets\/blog\/e3952e6c7c6e6fcb0e8f61f64809254b58959b94-1384x680-1_285419def5\/e3952e6c7c6e6fcb0e8f61f64809254b58959b94-1384x680-1_285419def5.png?_i=AA","keywords":["Guest Post","HTML5","Javascript","Next.js","React","Under Review"],"inLanguage":"en-US","copyrightYear":"2022","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/youtube-like-click-to-unmute-feature-in-nextjs\/","url":"https:\/\/cloudinary.com\/blog\/guest_post\/youtube-like-click-to-unmute-feature-in-nextjs\/","name":"Youtube-like &quot;Click to Unmute&quot; Feature in NextJS","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/youtube-like-click-to-unmute-feature-in-nextjs\/#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/youtube-like-click-to-unmute-feature-in-nextjs\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681923554\/Web_Assets\/blog\/e3952e6c7c6e6fcb0e8f61f64809254b58959b94-1384x680-1_285419def5\/e3952e6c7c6e6fcb0e8f61f64809254b58959b94-1384x680-1_285419def5.png?_i=AA","datePublished":"2022-09-19T16:57:41+00:00","dateModified":"2025-04-16T21:47:39+00:00","description":"When you're about to watch a YouTube video on a mobile device, at first, the video is on mute. Then you'd see a button at the top left corner for unmuting the video. This article will walk you through implementing that feature using video events in Next.js.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/youtube-like-click-to-unmute-feature-in-nextjs\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/guest_post\/youtube-like-click-to-unmute-feature-in-nextjs\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/youtube-like-click-to-unmute-feature-in-nextjs\/#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681923554\/Web_Assets\/blog\/e3952e6c7c6e6fcb0e8f61f64809254b58959b94-1384x680-1_285419def5\/e3952e6c7c6e6fcb0e8f61f64809254b58959b94-1384x680-1_285419def5.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681923554\/Web_Assets\/blog\/e3952e6c7c6e6fcb0e8f61f64809254b58959b94-1384x680-1_285419def5\/e3952e6c7c6e6fcb0e8f61f64809254b58959b94-1384x680-1_285419def5.png?_i=AA","width":1384,"height":680},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/youtube-like-click-to-unmute-feature-in-nextjs\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Youtube-like &quot;Click to Unmute&quot; Feature in NextJS"}]},{"@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\/v1681923554\/Web_Assets\/blog\/e3952e6c7c6e6fcb0e8f61f64809254b58959b94-1384x680-1_285419def5\/e3952e6c7c6e6fcb0e8f61f64809254b58959b94-1384x680-1_285419def5.png?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28540","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=28540"}],"version-history":[{"count":2,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28540\/revisions"}],"predecessor-version":[{"id":37459,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28540\/revisions\/37459"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/28541"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=28540"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=28540"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=28540"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}