{"id":28288,"date":"2022-03-23T22:01:28","date_gmt":"2022-03-23T22:01:28","guid":{"rendered":"http:\/\/Building-a-Youtube-Style-Post-Video-Overlay-CTA"},"modified":"2025-04-16T14:52:44","modified_gmt":"2025-04-16T21:52:44","slug":"building-a-youtube-style-post-video-overlay-cta","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/building-a-youtube-style-post-video-overlay-cta\/","title":{"rendered":"Building a Youtube-Style Post-Video Overlay CTA"},"content":{"rendered":"

When you watch a YouTube video, at the end, some cards appear on the screen suggesting other videos to watch.\nThis article is going to walk through managing video events to create a similar experience for videos in React.js.<\/p>\n

Sandbox<\/h2>\n

We completed this project in a Codesandbox<\/a> and it\u2019s also available on GitHub<\/a>. Fork it to run the project or get started quickly.<\/p>\n

    \n<\/code><\/span><\/pre>\n<\/div>\n\n\n  
\n    <\/iframe>\n  <\/div>\n\n\n
\nGitHub URL: https:\/\/github.com\/folucode\/YouTube-post-video-overlay\/tree\/main\/\n\n## Prerequisite\n\nTo follow through with this article, we need to have an understanding of JavaScript and React.js. \n\n\n## Project Setup\n\n[Node](https:\/\/nodejs.org\/en\/) and its package manager [npm](https:\/\/www.npmjs.com\/) are required to initialize a new project.\n\nUsing `npm` would require that we download the package to our computer before using it, but `npm` comes with an executor called `npx`.  You can [find more information on using npx here](https:\/\/docs.npmjs.com\/cli\/v7\/commands\/npx).\n\n`npx` stands for Node Package Execute. It allows us to execute any package that we want from the `npm` registry without installing it.\n\nTo install Node, we go to the [Node](https:\/\/nodejs.org\/en\/)[js](https:\/\/nodejs.org\/en\/) [website](https:\/\/nodejs.org\/en\/), download the Node version for our Operating system and follow the installation instructions. After we successfully installed the software, we should be able to verify Node.js by checking the installed version from the command line using the command below:\n \n```bash\n    node -v\n    v14.7.1\n<\/code><\/pre>\n
The result shows the version of Node.js we installed on our computer. In the above example, we have node at version 14.7.1.<\/p>\n
Creating the application<\/h2>\n
create-react-app<\/code> is the package we would use to generate a new react application. It is the official node package for creating react applications.<\/p>\n
We use the command below to create a new application:<\/p>\n
    npx create-react-app youtube-overlay-app\n<\/code><\/span><\/pre>\n
The above command will create a new React.js application called youtube-overlay-app.<\/p>\n
Installing Cloudinary<\/h2>\n
Cloudinary<\/a> provides a rich media management experience enabling users to upload, store, manage, manipulate, and deliver images and video for websites and applications.<\/p>\n
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 Cloudinary-react package<\/a> to render Cloudinary videos on a page. We Install the cloudinary-react package in the project using npm<\/code> by running the following command in the project\u2019s root directory:<\/p>\n
    npm i cloudinary-react\n<\/code><\/span><\/pre>\n
With installations completed, we\u2019ll start the react application using the command below:<\/p>\n
    npm start\n<\/code><\/span><\/pre>\n
Once run, the command spins up a local development server which we can access on http:\/\/localhost:3000<\/a>.<\/p>\n
Rendering the parent video component<\/h2>\n
In the \u201cApp.js\u201d file in the \u201csrc\u201d folder, we clear all the boilerplate code and then replace it with the code below that renders a Cloudinary video<\/a>.<\/p>\n
    import<\/span> { Video, CloudinaryContext } from<\/span> \"cloudinary-react\"<\/span>;\n    \n    export<\/span> default<\/span> function<\/span> App<\/span>(<\/span>) <\/span>{\n      return<\/span> (\n        <div<\/span> className<\/span>=\"App\"<\/span>><\/span>\n          <div<\/span> className<\/span>=\"video-area\"<\/span>><\/span>\n            <CloudinaryContext<\/span> cloudName<\/span>=\"chukwutosin\"<\/span>><\/span>\n              <Video<\/span>\n                publicId<\/span>=\"samples\/elephants\"<\/span>\n                controls<\/span>\n                muted<\/span>\n                width<\/span>=\"500px\"<\/span>\n              \/><\/span>\n            <\/CloudinaryContext<\/span>><\/span>\n          <\/div<\/span>><\/span>\n        <\/div<\/span>><\/span><\/span>\n      );\n    }\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
First, we imported the Video<\/code> component that renders the video onto the page and CloudinaryContext<\/code>. This component takes props of any data we want to make available to its child Cloudinary components.<\/p>\n
\n
Cloudinary offers a great free tier which is enough for all our development needs.<\/p>\n<\/blockquote>\n
We use the Video<\/code> component to render a 500px wide video player\u200a, having controls, and is muted on playback. We then pass a prop called publicId<\/code>, which is the public ID of the video you want to render. A public ID is a unique identifier for a media asset stored on Cloudinary.<\/p>\n
The rendered video should look like this:<\/p>\n
\"\"<\/p>\n
Accessing the methods and properties of the video<\/h2>\n
We can seamlessly access the methods and properties of the video element using the innerRef<\/code> prop provided by the cloudinary-react package<\/a>.<\/p>\n
By creating a reference using React\u2019s useRef()<\/code> hook and assigning it to the innerRef<\/code> 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<\/code> property of the ref.<\/p>\n
We create a ref and assign it with:<\/p>\n
    import<\/span> { Video, CloudinaryContext } from<\/span> \"cloudinary-react\"<\/span>;\n    import<\/span> { useRef } from<\/span> \"react\"<\/span>; \/\/ change 1<\/span>\n    \n    export<\/span> default<\/span> function<\/span> App<\/span>(<\/span>) <\/span>{\n      const<\/span> videoRef = useRef(); \/\/ change 2<\/span>\n    \n      return<\/span> (\n        <div<\/span> className<\/span>=\"App\"<\/span>><\/span>\n          <div<\/span> className<\/span>=\"video-area\"<\/span>><\/span>\n            <CloudinaryContext<\/span> cloudName<\/span>=\"chukwutosin\"<\/span>><\/span>\n              <Video<\/span>\n                publicId<\/span>=\"samples\/elephants\"<\/span>\n                controls<\/span>\n                muted<\/span>\n                width<\/span>=\"500px\"<\/span>\n                innerRef<\/span>={videoRef}<\/span> \/\/ change<\/span> 3<\/span>\n              \/><\/span>\n            <\/CloudinaryContext<\/span>><\/span>\n          <\/div<\/span>><\/span>\n        <\/div<\/span>><\/span><\/span>\n      );\n    }\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Managing video events<\/h2>\n
When the video playback starts and ends, we listen to both events and trigger specific actions.\nUsing React\u2019s useEffect<\/code> hook, we\u2019ll update the state of the video player stored in the component\u2019s state.<\/p>\n
We create the state variable and the effects with:<\/p>\n
    import<\/span> { Video, CloudinaryContext } from<\/span> \"cloudinary-react\"<\/span>;\n    import<\/span> { useRef, useEffect, useState } from<\/span> \"react\"<\/span>;\n    \n    export<\/span> default<\/span> function<\/span> App<\/span>(<\/span>) <\/span>{\n      const<\/span> [videoEnded, setVideoEnded] = useState(false<\/span>);\n      const<\/span> videoRef = useRef();\n    \n      useEffect(()<\/span> =><\/span> {\n        const<\/span> video = videoRef.current;\n        video.onplay = ()<\/span> =><\/span> {\n          setVideoEnded(false<\/span>);\n        };\n    \n        video.onended = ()<\/span> =><\/span> {\n          setVideoEnded(true<\/span>);\n        };\n      }, []);\n      return<\/span> (\n        \/\/ render component here<\/span>\n      );\n    }\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
First, we created a state variable to hold a value for when the video playback finishes.<\/p>\n
We listen for the onended<\/code> and onplay<\/code> events of the video In the useEffect<\/code> hook. Next, we update the videoEnded<\/code> variable to true<\/code> if the video completes playing and false if it resumes playing.<\/p>\n
Applying the overlay effect<\/h2>\n
We start by creating a component to house the overlay that we would show. Next, we create a new file called \u2018Card.js\u2019 in src<\/code> and paste it into the code below.<\/p>\n
    const<\/span> data = [\n      {\n        alt<\/span>: \"bike\"<\/span>,\n        link<\/span>: \"https:\/\/www.youtube.com\/watch?v=6uq3P7zeYyU\"<\/span>,\n        thumbnail<\/span>:\n          \"https:\/\/res.cloudinary.com\/chukwutosin\/image\/upload\/v1590019494\/samples\/bike.jpg\"<\/span>\n      },\n      {\n        alt<\/span>: \"sheep\"<\/span>,\n        link<\/span>: \"https:\/\/www.youtube.com\/watch?v=7w8K8GHs5Aw\"<\/span>,\n        thumbnail<\/span>:\n          \"https:\/\/res.cloudinary.com\/chukwutosin\/image\/upload\/v1590019492\/samples\/sheep.jpg\"<\/span>\n      },\n      {\n        alt<\/span>: \"kitten-playing\"<\/span>,\n        link<\/span>: \"https:\/\/www.youtube.com\/watch?v=4SnUsJOpw74\"<\/span>,\n        thumbnail<\/span>:\n          \"https:\/\/res.cloudinary.com\/chukwutosin\/image\/upload\/v1590019500\/samples\/animals\/kitten-playing.gif\"<\/span>\n      },\n      {\n        alt<\/span>: \"reindeer\"<\/span>,\n        link<\/span>: \"https:\/\/www.youtube.com\/watch?v=ujxRTqqQODY\"<\/span>,\n        thumbnail<\/span>:\n          \"https:\/\/res.cloudinary.com\/chukwutosin\/image\/upload\/v1590019491\/samples\/animals\/reindeer.jpg\"<\/span>\n      }\n    ];\n    \n    const<\/span> Card = ()<\/span> =><\/span> (\n      <div<\/span> className<\/span>=\"card\"<\/span>><\/span>\n        {data.map((element, index) => (\n          <span<\/span> className<\/span>=\"column\"<\/span>><\/span>\n            <a<\/span> key<\/span>={index}<\/span> href<\/span>={element.link}<\/span>><\/span>\n              <img<\/span> alt<\/span>={element.alt}<\/span> src<\/span>={element.thumbnail}<\/span> \/><\/span>\n            <\/a<\/span>><\/span>\n          <\/span<\/span>><\/span>\n        ))}\n      <\/div<\/span>><\/span><\/span>\n    );\n    export<\/span> default<\/span> Card;\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
data<\/code> is an array of Objects with information for each card we want to overlay on the video element. Then, we made a functional component where we looped through each object in the data<\/code> array and rendered a thumbnail image wrapped in a link.<\/p>\n
We would need to add a stylesheet to customize the overlay on the video element. We do this by deleting the boilerplate styles in the index.css file and adding the following styles:<\/p>\n
    .App<\/span> {\n      font-family<\/span>: Cambria, Cochin, Georgia, Times, \"Times New Roman\"<\/span>, serif;\n      text-align<\/span>: center;\n      margin<\/span>: 0<\/span>;\n      padding<\/span>: 0<\/span>;\n      width<\/span>: auto;\n      height<\/span>: 100vh<\/span>;\n    }\n    h3<\/span> {\n      color<\/span>: rgb<\/span>(46<\/span>, 44<\/span>, 44<\/span>);\n    }\n    .video-area<\/span> {\n      position<\/span>: relative;\n      width<\/span>: 500px<\/span>;\n      margin<\/span>: auto;\n      left<\/span>: calc<\/span>(50%<\/span> \u2014 200px<\/span>);\n    }\n    .card<\/span> {\n      left<\/span>: 50%<\/span>;\n      margin-left<\/span>: -250px<\/span>;\n      width<\/span>: 500px<\/span>;\n      position<\/span>: absolute;\n      z-index<\/span>: 1<\/span>;\n      background<\/span>: rgba<\/span>(0<\/span>, 0<\/span>, 0<\/span>, 0.6<\/span>);\n    }\n    .column<\/span> {\n      float<\/span>: left;\n      text-align<\/span>: center;\n      border<\/span>: solid 1px<\/span> rgb<\/span>(180<\/span>, 179<\/span>, 179<\/span>);\n      width<\/span>: 45%<\/span>;\n      margin<\/span>: 2.3%<\/span>;\n      height<\/span>: 85px<\/span>;\n      opacity<\/span>: 1<\/span>;\n    }\n    img<\/span> {\n      height<\/span>: 100%<\/span>;\n      width<\/span>: 100%<\/span>;\n    }\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n
After that, we import both files, \u2018Card.js\u2019 and \u2018index.css\u2019 into the \u2018App.js\u2019 file using:<\/p>\n
    import<\/span> \".\/index.css\"<\/span>;\n    import<\/span> Card from<\/span> \".\/Card\"<\/span>;\n    \n    \/\/ the rest of the content goes here...<\/span>\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
With the overlay cards completed, we will show the overlay or hide it depending on the state of the videoEnded<\/code> variable, either true or false.<\/p>\n
In App.js, we include a conditional render block to show or hide the <Card\/><\/code> component.<\/p>\n
    \/\/ code before return statement...<\/span>\n      return<\/span> (\n        <div<\/span> className<\/span>=\"App\"<\/span>><\/span>\n          <h1<\/span>><\/span>Building YouTube-style post-video overlay CTA<\/h1<\/span>><\/span>\n          <h3<\/span>><\/span>\n            This is a demo of how to build a simple clone of the YouTube post video\n            overlay\n          <\/h3<\/span>><\/span>\n          {videoEnded && <Card<\/span> \/><\/span>}\n          <div<\/span> className<\/span>=\"video-area\"<\/span>><\/span>\n            <CloudinaryContext<\/span> cloudName<\/span>=\"chukwutosin\"<\/span>><\/span>\n              <Video<\/span>\n                publicId<\/span>=\"samples\/elephants\"<\/span>\n                controls<\/span>\n                muted<\/span>\n                width<\/span>=\"500px\"<\/span>\n                innerRef<\/span>={videoRef}<\/span>\n              \/><\/span>\n            <\/CloudinaryContext<\/span>><\/span>\n          <\/div<\/span>><\/span>\n        <\/div<\/span>><\/span><\/span>\n      );\n    }\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
With this, once the video playback completes, the videoEnded<\/code> variable is set to true<\/code>, and the cards overlays on the video. Each card can link to a CTA of our choice. Here\u2019s what it looks like below.<\/p>\n
\"\"<\/p>\n
Conclusion<\/h1>\n
This article addressed utilizing video events to create youtube-styled call-to-action cards on a video once playback ends. This technique is employed to increase conversion on a video\u2019s call to actions.<\/p>\n\n
Resources<\/h1>\n
You may find these resources helpful.<\/p>\n
The videoEnded<\/code> state variable will be used in a condition to render the video overlay<\/a>.<\/p>\n
The cloudName<\/code> prop is your Cloudinary cloud name which you can get from your Cloudinary dashboard once you create a Cloudinary Account<\/a>.<\/p>\n