How to Implement Custom Size Video Overlay

How to Implement Custom Size Video Overlay

While viewers watching your video, they can click on an area in the video to open a full-screen video overlay and get extra information. Viewers can close this video overlay and resume the main video. The difference between Custom-Size Video Overlay and Full Screen Video Overlay is that custom size video overlay is made with HTML widget and embed code of the video. Let's look at how to.

Create a project from the main video that you want to add Overlay and open the Cinema8 Editor.

1- Add two layers to the video timeline. One of them is for the video overlay, another one is for the hotspot.

2- Add a clickable hotspot to the second layer because when the custom-size video overlay opens, we want the hotspot to stay under the overlay. This hotspot can be a text, image or clickable area. Click here to see how to. After adding, set the time interval of Start and End from its properties panel as long as you want to show the element in the video. We set it to be visible throughout the video.

3- We will add a custom-size video overlay to the first layer. In other words, this video will appear with the custom size that you arrange when the button in the second layer is clicked. To do this, you need to have the embed code of the video that you will make as an overlay. You can get this code from any video on YouTube, Vimeo, Cinema8, or other different platforms.

To add a custom-size video overlay, add an Html widget from the Elements panel to the first layer. You can read this article to learn how to embed video with Html widget. When you read the article, you will see how to customize the size of the overlay video.

Then, name it in the Properties panel. Set the Start and End time period to how long you want to show the element in the video. We set it to be visible throughout the video. Unmark the Visible feature because we don't want it to appear in the main video without clicking the button.

5- Click on the hotspot element that you added as an overlay open button and go to the Properties panel. We will determine the action to be taken when it’s clicked.

Click Set Visible from the On Click list. Select the overlay video name that will open when you click this open button from the Target Tracklist.

That's all!


    • Related Articles

    • How to Implement Full Screen Video Overlay

      While viewers watching your video, they can click on an area in the video to open a different video overlay and get extra information. Viewers can close this video overlay and resume the main video. Let's look at how to. Create a project from the ...
    • How to Implement Text Overlay

      Sometimes you may want to give viewers extra information about a person, product, place, or event included in the video. While doing this, you can use text information popups within the video. Let's look at how to?; Create a project from the video ...
    • How to Implement Image Overlay

      Sometimes you may want to give viewers extra information about a person, product, place, or event included in the video. While doing this, you can use information popups within the video. Let's look at how to. Create a project from the video that you ...
    • How to Use Server Side Webhooks to Inject Custom Variables in to Video

      The Webhooks integration allows you to be automatically notified when something happens in front without having to constantly poll the API. It also gives you access to a new rule action to set up a URL that will receive an HTTP request every time the ...
    • How to Add Questions on Video

        Adding Question on Video is a straight forward functionality  you can add different question types with drag&drop tools with creative studio.