Search articles


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 Track list.

That's all!