{"id":28344,"date":"2022-03-23T22:23:47","date_gmt":"2022-03-23T22:23:47","guid":{"rendered":"http:\/\/Creating-Netflix-style-video-overlays-with-Nuxtjs"},"modified":"2022-03-23T22:23:47","modified_gmt":"2022-03-23T22:23:47","slug":"creating-netflix-style-video-overlays-with-nuxtjs","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/creating-netflix-style-video-overlays-with-nuxtjs\/","title":{"rendered":"How to implement YouTube Post Video Transitions"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><p>Transitions have solidified themselves as an important part of web applications, as they have been used in different ways to capture users\u2019 attention. They, however, have also been known to be a little tricky to implement. This problem has been mitigated by the release of UI libraries over the years.<\/p>\n<p>This article will walk us through embedding a video player and handling video overlay transitions similar to what we see on Netflix, using Nuxt.js.<\/p>\n<h2>What we will be building<\/h2>\n<p>Akin to smart TV\u2019s Netflix, we want our video to start playing automatically after three seconds when our video player mounts. After five seconds, we want our overlay to fade out, only to fade back in when the video ends.<\/p>\n<p>Check out the <a href=\"https:\/\/codesandbox.io\/s\/fervent-haze-swf0p?file=\/package.json\">Codesandbox<\/a> to get started quickly.<\/p>\n<\/div>\n  \n  <div class=\"wp-block-cloudinary-code-sandbox \">\n    <iframe\n      src=\"https:\/\/codesandbox.io\/embed\/fervent-haze-swf0p?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=\"nuxtjs-netflix-animation\"\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  <div class=\"wp-block-cloudinary-markdown \"><p>GitHub URL:<\/p>\n<p><a href=\"https:\/\/github.com\/Iheanacho-ai\/nuxtjs-netflix-animation\">https:\/\/github.com\/Iheanacho-ai\/nuxtjs-netflix-animation<\/a><\/p>\n<h2>Prerequisities<\/h2>\n<p>To get the most out of this article it is important that we have the following:<\/p>\n<ul>\n<li>A basic understanding of CSS, JavaScript and Vue.js<\/li>\n<li>Node and it\u2019s package manager, <code>npm<\/code>. Run the command <code>node -v<\/code> &amp;&amp; <code>npm -v<\/code> to verify we have them installed, or install them from <a href=\"https:\/\/nodejs.org\/en\/\">here<\/a>. It is recommended that we have the latest version.<\/li>\n<li>Alternatively, we can use another package manager, <a href=\"https:\/\/yarnpkg.com\/\">Yarn<\/a>.<\/li>\n<li>Understanding Nuxt.js would help us follow through with this tutorial quicker, but it is not entirely required.<\/li>\n<li>A Cloudinary account, if you don\u2019t have one, you can create one <a href=\"https:\/\/cloudinary.com\/\">here<\/a>.<\/li>\n<\/ul>\n<h2>Setting up our Nuxtjs app<\/h2>\n<p><a href=\"https:\/\/nuxtjs.org\/\">Nuxt.js<\/a> is an open-source vue.js frontend development framework that allows us to create universal web applications without stress, render statically Vue.js applications without having a server, and enables functionalities like server-side rendering, static site generating, etc. in our project.<\/p>\n<p>To create a nuxt.js app, we go to our terminal and run the command below.<\/p>\n<p><strong>NOTE: If you are on windows and using Git Bash you might have issues with the arrows, so it is advisable that you use the Powershell terminal instead.<\/strong><\/p>\n<pre class=\"js-syntax-highlighted\"><code>\n    npm init nuxt-app &lt;project-name&gt;\n    \n    #or\n    \n    npx create-nuxt-app &lt;project-name&gt;\n    \n    #or\n    \n    yarn create nuxt-app &lt;project-name&gt;\n\n<\/code><\/pre>\n<p>Running this command will trigger a set of question prompts. In the picture below, this is the setup I used.<\/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_F22DDC6F8A9E63BACED9FA7A7E011649B13CCD6D40585994C06044C0C3C992F2_1642624609920_questions-3.PNG\" alt=\"setup for nuxtjs\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"727\" height=\"211\"\/><\/p>\n<p>After that, we run these commands<\/p>\n<pre class=\"js-syntax-highlighted\"><code>\ncd &lt;project name&gt;\n    \nnpm run dev\n    \n#or\n    \nyarn dev\n\n<\/code><\/pre>\n<p>This would change the directory to our project and run it on the browser, to see our app go to <a href=\"http:\/\/localhost:3000\/\">http:\/\/localhost:3000\/<\/a><\/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_F22DDC6F8A9E63BACED9FA7A7E011649B13CCD6D40585994C06044C0C3C992F2_1642624646362_nuxtjs-index.PNG\" alt=\"nuxtjs index setup \" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1600\" height=\"738\"\/><\/p>\n<h2>Installing dependencies<\/h2>\n<p>In this section of the tutorial, we will install the dependencies required for this project. These dependencies are Cloudinary for the video player and Vue2-animate for handling the transitions.<\/p>\n<h3>Cloudinary<\/h3>\n<p>Cloudinary is a cloud-based service that provides an end-to-end image and video management solution, including uploads, storage, manipulations, optimizations, and delivery.<\/p>\n<p>It also allows developers to embed video players in their app that handles video events effectively.<\/p>\n<p>To enable our nuxt app to use these Cloudinary features, we will add the video player assets in the <code>head<\/code> section of our <code>nuxt.config.js<\/code> file.<\/p>\n<pre class=\"js-syntax-highlighted\"><code>    \/\/ nuxt.config.js\n    \n    export  default  {\n        head:  {\n        ...\n          link: [\n            ...\n            { rel:  'stylesheet', href:  'https:\/\/unpkg.com\/cloudinary-video-player@1.5.9\/dist\/cld-video-player.min.css'  }\n          ],\n          script:  [\n            { src:  'https:\/\/unpkg.com\/cloudinary-core@latest\/cloudinary-core-shrinkwrap.min.js'  },\n            { src:  'https:\/\/unpkg.com\/cloudinary-video-player@1.5.9\/dist\/cld-video-player.min.js'  },\n          ],\n        },\n    \n    };\n\n<\/code><\/pre>\n<p>Next up, we create a <code>.env<\/code> at the root of our project.<\/p>\n<pre class=\"js-syntax-highlighted\"><code>    touch .env\n\n<\/code><\/pre>\n<p>After creating our <code>.env<\/code> file, we go to our <a href=\"https:\/\/cloudinary.com\/console\">Dashboard<\/a>, in the Account Details section we can see our cloud name, we copy paste it in our <code>.env<\/code> file.<\/p>\n<pre class=\"js-syntax-highlighted\"><code>\n    CLOUD_NAME = &lt;Cloudinary-cloud-name&gt;\n\n<\/code><\/pre>\n<h3>Vue2-animate<\/h3>\n<p><a href=\"https:\/\/www.npmjs.com\/package\/vue2-animate\">Vue2-animate<\/a> is a great UI library created for the Vue.js framework. It helps developers create high-performance and stunning animations with just a few lines of code.<\/p>\n<p>To install <code>vue2-animate<\/code> in our project, we run this command.<\/p>\n<pre class=\"js-syntax-highlighted\"><code>    npm install --save vue2-animate\n    \n    #or\n    \n    yarn add vue2-animate\n\n<\/code><\/pre>\n<h3>Creating our Video Player<\/h3>\n<p>In our <code>index.vue<\/code>  file, we embed the Cloudinary video player in our project using the HTML5 native <code>video<\/code> element.<\/p>\n<p>We then give the element an <code>id<\/code> of <code>video-player<\/code> and a <code>class<\/code> of <code>cld-video-player<\/code> .<\/p>\n<pre class=\"js-syntax-highlighted\"><code>    &lt;template&gt;\n      &lt;div&gt;\n        &lt;video \n        id= &quot;video-player&quot;\n        class=&quot;cld-video-player&quot;\n        &gt;\n        &lt;\/video&gt; \n      &lt;\/div&gt;\n    &lt;\/template&gt;\n\n<\/code><\/pre>\n<p>In our <code>mounted<\/code> lifecycle hook, we create a Cloudinary instance. Doing this in our mounted lifecycle hook allows the instance to be created once the app mounts.<\/p>\n<pre class=\"js-syntax-highlighted\"><code>    \/\/ pages\/index.vue\n    \n    &lt;script&gt;\n    \n    export default {\n      data(){\n        return{\n          cld: null,\n          player: null,\n          video: &quot;production_ID_4456999_gr6iy4&quot;\n        }\n      },\n      mounted(){\n        this.cld= cloudinary.Cloudinary.new({\n          cloud_name:  process.env.CLOUD_NAME,\n          secure:  true\n        })\n        this.player = this.cld.videoPlayer(\n          'video-player'\n        );\n        this.player.source(this.video);\n    }\n    \n    }\n    \n    \n    &lt;\/script&gt;\n\n<\/code><\/pre>\n<p>In the <code>data<\/code> object, we define three variables:<\/p>\n<ul>\n<li>The <code>cld<\/code> variable holds the Cloudinary instance we will create.<\/li>\n<li>The <code>player<\/code> variable holds the new Cloudinary video player we will instantiate on mount. We do this by passing the id <code>video-player<\/code> (id of our video element) to the <code>VideoPlayer<\/code> method.<\/li>\n<li>The <code>video<\/code> variable holds the <code>id<\/code> of the video we are looking to play stored on cloudinary.<\/li>\n<\/ul>\n<p>In our mounted lifecycle hook, we create a Cloudinary instance from the Cloudinary object by providing the cloud name we stored in our <code>.env<\/code> file and <code>secure: true<\/code>, as arguments.<\/p>\n<p>We then instantiate the Cloudinary video player using the videoPlayer method and passing either the video player id or the video player itself, as as argument.<\/p>\n<p>After we create our player, we sourced the video we are looking to play.<\/p>\n<p>Next, in the style section of our <code>index.vue<\/code> file, we add a bit of styling to our video player, with a width of 500px and a height of 300px.<\/p>\n<pre class=\"js-syntax-highlighted\"><code>    &lt;style scoped&gt;\n      div{\n        margin: 0;\n        padding: 0;\n      }\n      .cld-video-player{\n        width: 500px;\n        height: 300px;\n      }\n    &lt;\/style&gt;\n    \n<\/code><\/pre>\n<p>With that we have embedded a Cloudinary video player in our project.<\/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_F22DDC6F8A9E63BACED9FA7A7E011649B13CCD6D40585994C06044C0C3C992F2_1642628374996_video-player.PNG\" alt=\"Nuxtjs Cloudinary Video Player\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"347\" height=\"215\"\/><\/p>\n<h3>Creating our overlay<\/h3>\n<p>In the <code>template<\/code> section of our <code>index.vue<\/code> file, we create our video overlay with the HTML native <code>div<\/code> element.<\/p>\n<pre class=\"js-syntax-highlighted\"><code>     &lt;div class = 'overlay' &gt;\n        &lt;h2 class= 'overlay-header'&gt;bonne vitesse&lt;\/h2&gt;\n        &lt;p&gt;\n          You look down on where you came from sometimes\n          But you'll have this place to call home, always.\n        &lt;\/p&gt;\n        &lt;button&gt;Play&lt;\/button&gt;\n      &lt;\/div&gt;\n<\/code><\/pre>\n<p>Our overlay is incomplete without the styling<\/p>\n<pre class=\"js-syntax-highlighted\"><code>    .overlay{\n      box-sizing: border-box;\n      font-family: 'Nunito', sans-serif;\n      width: 250px;\n      height: 300px;\n      padding: 10px;\n      background-color: rgba(0, 0, 0, 0.35);\n      color: #fff;\n      position: absolute;\n      top: 7px;\n      left: 7px;\n      bottom: 7px;\n    }\n    .overlay-header{\n      text-align: center;\n    }\n    button{\n      width: 90%;\n      height: 30px;\n      margin: 0 auto;\n    }\n\n<\/code><\/pre>\n<p>We give our overlay a width of 250px (half of our video player) and a height of 300px. Our overlay has an absolute position to sit on our video player.<\/p>\n<h3>Selectively rendering the overlay and playing the video.<\/h3>\n<p>To selectively render our overlay, we must first create an <code>overlay<\/code> variable in the <code>data<\/code> object. This will be used to control our overlay.<\/p>\n<pre class=\"js-syntax-highlighted\"><code>    export default {\n      data(){\n        return{\n          cld: null,\n          player: null,\n          video: &quot;production_ID_4456999_gr6iy4&quot;,\n    \n    \/\/ overlay variable\n          overlay: true,\n        }\n      },\n      mounted(){\n        this.cld= cloudinary.Cloudinary.new({\n          cloud_name:  process.env.NUXT_ENV_CLOUDINARY_CLOUD_NAME,\n          secure:  true\n        })\n        this.player = this.cld.videoPlayer(\n          'video-player'\n        );\n        this.player.source(this.video);\n    }\n\n<\/code><\/pre>\n<p>Next, we add a <code>setTimeout<\/code> function to remove the overlay after five seconds in our mounted lifecycle hook. Then we use Cloudinary\u2019s <code>ended<\/code> video player event to set the overlay to true when the video ends.<\/p>\n<pre class=\"js-syntax-highlighted\"><code>\n    this.player.on('ended', ()=&gt; {\n        this.overlay = true\n      })\n    \n      setTimeout(() =&gt; {\n        this.overlay = false\n      }, 5000)\n    }\n<\/code><\/pre>\n<p>We then selectively render the overlay depending on the value of the overlay.<\/p>\n<pre class=\"js-syntax-highlighted\"><code>\n    &lt;template&gt;\n      &lt;div&gt;\n        &lt;video \n        id= &quot;video-player&quot;\n        class=&quot;cld-video-player&quot;\n        &gt;\n      &lt;\/video&gt;\n    \n        &lt;div class = 'overlay' v-if = 'overlay'&gt;\n          &lt;h2 class= 'overlay-header'&gt;bonne vitesse&lt;\/h2&gt;\n          &lt;p&gt;\n            You look down on where you came from sometimes\n            But you'll have this place to call home, always.\n          &lt;\/p&gt;\n          &lt;button&gt; Play&lt;\/button&gt;\n        &lt;\/div&gt;\n        \n      &lt;\/div&gt;\n    &lt;\/template&gt;\n<\/code><\/pre>\n<h3>Selectively playing our video.<\/h3>\n<p>We want our video to play automatically after three seconds, but we also want the play button on the overlay to play the video.<\/p>\n<p>To achieve this, we use a <code>setTimeout<\/code> function to play the video after three seconds on the mounted lifecycle hook. We add a function on the method object called <code>playMedia<\/code>, which also plays the media.<\/p>\n<pre class=\"js-syntax-highlighted\"><code>    &lt;script&gt;\n    \n    export default {\n      data(){\n        return{\n          cld: null,\n          player: null,\n          video: &quot;production_ID_4456999_gr6iy4&quot;,\n          overlay: true,\n        }\n      },\n      methods: {\n        playMedia(){\n          this.player.play()\n        }\n      },\n    \n      mounted(){\n        this.cld= cloudinary.Cloudinary.new({\n          cloud_name:  process.env.NUXT_ENV_CLOUDINARY_CLOUD_NAME,\n          secure:  true\n        })\n        this.player = this.cld.videoPlayer(\n          'video-player'\n        );\n    \n        this.player.source(this.video);\n    \n        this.player.on('ended', ()=&gt; {\n          this.overlay = true\n        })\n    \n    \/\/ plays the media\n     \n        setTimeout(() =&gt; {\n          this.player.play()\n        }, 3000)\n    \n        setTimeout(() =&gt; {\n          this.overlay = false\n        }, 5000)\n      }\n    \n    }\n    \n    \n    &lt;\/script&gt;\n<\/code><\/pre>\n<p>Next, we then pass the <code>playMedia<\/code> method into an <code>onClick<\/code> event listener on our button.<\/p>\n<pre class=\"js-syntax-highlighted\"><code>    &lt;button @click= &quot;playMedia()&quot;&gt;Play&lt;\/button&gt;\n\n<\/code><\/pre>\n<h3>Animating our Overlay<\/h3>\n<p>To use the <code>vue2-animate<\/code> library in our project we have to require it, we do this in the <code>script<\/code>  section of our <code>index.vue<\/code> file.<\/p>\n<pre class=\"js-syntax-highlighted\"><code>\n    require('vue2-animate\/dist\/vue2-animate.min.css')\n\n<\/code><\/pre>\n<p>The <code>vue2-animate<\/code> allows us to use the <code>transition<\/code> component to animate our element. This <code>transition<\/code> component has a name prop that takes in the kind of animation we want our element to have, in this case, fade.<\/p>\n<p>We then specify the duration for the animation using the <code>style<\/code> prop.<\/p>\n<pre class=\"js-syntax-highlighted\"><code>    &lt;transition name=&quot;fade&quot;&gt;\n      &lt;div class = 'overlay' v-if = 'overlay' style=&quot;animation-duration: 1s&quot;&gt;\n        &lt;h2 class= 'overlay-header'&gt;bonne vitesse&lt;\/h2&gt;\n        &lt;p&gt;\n          You look down on where you came from sometimes\n          But you'll have this place to call home, always.\n        &lt;\/p&gt;\n        &lt;button @click= &quot;playMedia()&quot;&gt;Play&lt;\/button&gt;\n      &lt;\/div&gt;\n    &lt;\/transition&gt; \n<\/code><\/pre>\n<p>With these we have completed the Netflix-styled Video Overlay animation. Here is what it should look like:<\/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_F22DDC6F8A9E63BACED9FA7A7E011649B13CCD6D40585994C06044C0C3C992F2_1642666123394_giphy.gif\" alt=\"Video Overlay transitions in Nuxtjs\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"480\" height=\"258\"\/><\/p>\n<h2>Conclusion<\/h2>\n<p>In this article we discussed what Cloudinary is, why we would use it, and how to embed its video player in our project. We also discussed the <code>vue2-animate<\/code> library and used it to animate in and out, our overlay depending on what player event was triggered.<\/p>\n<h2>Resources<\/h2>\n<p>You may find the following resources useful<\/p>\n<ul>\n<li>\n<a href=\"https:\/\/cloudinary.com\/documentation\/video_player_how_to_embed\">How to embed the Cloudinary Video Player<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/documentation\/video_player_api_reference\">Cloudinary Video Player API Reference<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/github.com\/asika32764\/vue2-animate\">Vue2-animate<\/a>\n<\/li>\n<\/ul>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":28345,"comment_status":"","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[134,145,372,371,315],"class_list":["post-28344","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-guest-post","tag-html5","tag-nuxtjs","tag-under-review","tag-vue"],"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 implement YouTube Post Video Transitions<\/title>\n<meta name=\"description\" content=\"Embed video players in your project with the Cloudinary API and learn how to handle player events to create Netflix-esque transitions with Vue2-animate library.\" \/>\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\/creating-netflix-style-video-overlays-with-nuxtjs\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to implement YouTube Post Video Transitions\" \/>\n<meta property=\"og:description\" content=\"Embed video players in your project with the Cloudinary API and learn how to handle player events to create Netflix-esque transitions with Vue2-animate library.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/guest_post\/creating-netflix-style-video-overlays-with-nuxtjs\/\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-03-23T22:23:47+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924748\/Web_Assets\/blog\/294f2b7853fdd27b8fd5694c8129683a7fbeadc6-5398x3648-1_283459e72d\/294f2b7853fdd27b8fd5694c8129683a7fbeadc6-5398x3648-1_283459e72d.jpg?_i=AA\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/creating-netflix-style-video-overlays-with-nuxtjs\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/creating-netflix-style-video-overlays-with-nuxtjs\/\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"How to implement YouTube Post Video Transitions\",\"datePublished\":\"2022-03-23T22:23:47+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/creating-netflix-style-video-overlays-with-nuxtjs\/\"},\"wordCount\":7,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/creating-netflix-style-video-overlays-with-nuxtjs\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924748\/Web_Assets\/blog\/294f2b7853fdd27b8fd5694c8129683a7fbeadc6-5398x3648-1_283459e72d\/294f2b7853fdd27b8fd5694c8129683a7fbeadc6-5398x3648-1_283459e72d.jpg?_i=AA\",\"keywords\":[\"Guest Post\",\"HTML5\",\"NuxtJS\",\"Under Review\",\"Vue\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2022\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/creating-netflix-style-video-overlays-with-nuxtjs\/\",\"url\":\"https:\/\/cloudinary.com\/blog\/guest_post\/creating-netflix-style-video-overlays-with-nuxtjs\/\",\"name\":\"How to implement YouTube Post Video Transitions\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/creating-netflix-style-video-overlays-with-nuxtjs\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/creating-netflix-style-video-overlays-with-nuxtjs\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924748\/Web_Assets\/blog\/294f2b7853fdd27b8fd5694c8129683a7fbeadc6-5398x3648-1_283459e72d\/294f2b7853fdd27b8fd5694c8129683a7fbeadc6-5398x3648-1_283459e72d.jpg?_i=AA\",\"datePublished\":\"2022-03-23T22:23:47+00:00\",\"description\":\"Embed video players in your project with the Cloudinary API and learn how to handle player events to create Netflix-esque transitions with Vue2-animate library.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/creating-netflix-style-video-overlays-with-nuxtjs\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/guest_post\/creating-netflix-style-video-overlays-with-nuxtjs\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/creating-netflix-style-video-overlays-with-nuxtjs\/#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924748\/Web_Assets\/blog\/294f2b7853fdd27b8fd5694c8129683a7fbeadc6-5398x3648-1_283459e72d\/294f2b7853fdd27b8fd5694c8129683a7fbeadc6-5398x3648-1_283459e72d.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924748\/Web_Assets\/blog\/294f2b7853fdd27b8fd5694c8129683a7fbeadc6-5398x3648-1_283459e72d\/294f2b7853fdd27b8fd5694c8129683a7fbeadc6-5398x3648-1_283459e72d.jpg?_i=AA\",\"width\":5398,\"height\":3648},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/creating-netflix-style-video-overlays-with-nuxtjs\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to implement YouTube Post Video Transitions\"}]},{\"@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 implement YouTube Post Video Transitions","description":"Embed video players in your project with the Cloudinary API and learn how to handle player events to create Netflix-esque transitions with Vue2-animate library.","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\/creating-netflix-style-video-overlays-with-nuxtjs\/","og_locale":"en_US","og_type":"article","og_title":"How to implement YouTube Post Video Transitions","og_description":"Embed video players in your project with the Cloudinary API and learn how to handle player events to create Netflix-esque transitions with Vue2-animate library.","og_url":"https:\/\/cloudinary.com\/blog\/guest_post\/creating-netflix-style-video-overlays-with-nuxtjs\/","og_site_name":"Cloudinary Blog","article_published_time":"2022-03-23T22:23:47+00:00","twitter_card":"summary_large_image","twitter_image":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924748\/Web_Assets\/blog\/294f2b7853fdd27b8fd5694c8129683a7fbeadc6-5398x3648-1_283459e72d\/294f2b7853fdd27b8fd5694c8129683a7fbeadc6-5398x3648-1_283459e72d.jpg?_i=AA","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/creating-netflix-style-video-overlays-with-nuxtjs\/#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/creating-netflix-style-video-overlays-with-nuxtjs\/"},"author":{"name":"","@id":""},"headline":"How to implement YouTube Post Video Transitions","datePublished":"2022-03-23T22:23:47+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/creating-netflix-style-video-overlays-with-nuxtjs\/"},"wordCount":7,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/creating-netflix-style-video-overlays-with-nuxtjs\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924748\/Web_Assets\/blog\/294f2b7853fdd27b8fd5694c8129683a7fbeadc6-5398x3648-1_283459e72d\/294f2b7853fdd27b8fd5694c8129683a7fbeadc6-5398x3648-1_283459e72d.jpg?_i=AA","keywords":["Guest Post","HTML5","NuxtJS","Under Review","Vue"],"inLanguage":"en-US","copyrightYear":"2022","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/creating-netflix-style-video-overlays-with-nuxtjs\/","url":"https:\/\/cloudinary.com\/blog\/guest_post\/creating-netflix-style-video-overlays-with-nuxtjs\/","name":"How to implement YouTube Post Video Transitions","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/creating-netflix-style-video-overlays-with-nuxtjs\/#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/creating-netflix-style-video-overlays-with-nuxtjs\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924748\/Web_Assets\/blog\/294f2b7853fdd27b8fd5694c8129683a7fbeadc6-5398x3648-1_283459e72d\/294f2b7853fdd27b8fd5694c8129683a7fbeadc6-5398x3648-1_283459e72d.jpg?_i=AA","datePublished":"2022-03-23T22:23:47+00:00","description":"Embed video players in your project with the Cloudinary API and learn how to handle player events to create Netflix-esque transitions with Vue2-animate library.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/creating-netflix-style-video-overlays-with-nuxtjs\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/guest_post\/creating-netflix-style-video-overlays-with-nuxtjs\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/creating-netflix-style-video-overlays-with-nuxtjs\/#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924748\/Web_Assets\/blog\/294f2b7853fdd27b8fd5694c8129683a7fbeadc6-5398x3648-1_283459e72d\/294f2b7853fdd27b8fd5694c8129683a7fbeadc6-5398x3648-1_283459e72d.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924748\/Web_Assets\/blog\/294f2b7853fdd27b8fd5694c8129683a7fbeadc6-5398x3648-1_283459e72d\/294f2b7853fdd27b8fd5694c8129683a7fbeadc6-5398x3648-1_283459e72d.jpg?_i=AA","width":5398,"height":3648},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/creating-netflix-style-video-overlays-with-nuxtjs\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to implement YouTube Post Video Transitions"}]},{"@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\/v1681924748\/Web_Assets\/blog\/294f2b7853fdd27b8fd5694c8129683a7fbeadc6-5398x3648-1_283459e72d\/294f2b7853fdd27b8fd5694c8129683a7fbeadc6-5398x3648-1_283459e72d.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28344","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=28344"}],"version-history":[{"count":0,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28344\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/28345"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=28344"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=28344"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=28344"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}