Transparent Video Banner

alpha channel html5 video

A transparent video banner (TVB) is in principle just a video that have an alpha channel enabled to define the transparency. The alpha channel is a color component that represents the degree of transparency (or opacity) of a color. An alpha value of 0 is transparent, an alpha value of 255 is opaque, and values in between are semi-transparent. Transparency is important for compositing operations, such as those in Video Post, where several images are blended together in layers.It is used to determine how a pixel is rendered when blended with another. We do this on instanyly on top of video, thus resulting in a moving high-quality banner with a definable click region. In this article we will explain how to make a Showtag Transparent Video Banner.

at first we need to define where we want the TVB to appear, in our case we use the example of Rogue One: A Star Wars Story. We take a screenshot from the program and load that as a background layer in our favorite video tool, in this example we use Adobe After Effects, first we set the project settings to the exact same dimensions as our background video or screengrab and we determine the length of the video, recommanded maximum length: 10 seconds

[image: setting the project size to the original video size]

in this example the actual video is 1920 width x 816 height. We want the video to appear in the middel of the video while taking in consideration the top bar, the TVB has a width of 970 pixels and a height of 650 pixels, what means the folloing percentage position 970/1920*100 = 50.52% width and 650/816*100 = 79.65% height of the video. We want to place the video in the x-axis center and in the bottom of the screen what results in (1920-970)/2 = 475 pixels what is 475/1920*100 = 24.74% from the left side of the video. In this example we rendered the TVB to be placed in the bottom what is a simple calculation 100-79.65= 20.35% of the top of the video

did you know that, you can de-activate the top-bar for programme's that have no need for overview buttons. However when you design a banner you need to take in consideration if the top bar is activated, when activated it is recommended to not use the top 10% of the screen
[image: position the transparent video banner on the video and calculated the position and width in percentage]

For the TVB itself we need to extract the Alpha layer from the video, if you have made a render from let's say Autodesk 3D Studio Max. 3ds Max creates the alpha channel automatically when you render.

For Autodesk 3Ds Max: You can see this in the rendered frame window by clicking the Display Alpha Channel button on the toolbar: In the resulting display, black pixels are fully transparent, white pixels are opaque, and gray pixels show degrees of transparency. To return to the regular display, click Display Alpha Channel again.

Any background pixels in the rendered image are fully transparent, and the alpha channel also accounts for any other transparency that you create via materials and maps. Make two seperate renders, if you like to extract a alpha channel in Adobe After Effect check out this video from youtube:

You will need to get the following result; one forefront video ( and one video that has the alpha channel (

[image: original video and seperate video with the Alpha Channel]

To create the TVB file that we use in Showtag Enabled we need to combine both videos and create a new video that has in the top the original video and in the bottom the alpha channel video, create in Adobe After Effects a new project with the width of the TVB (970 pixels) and two times the height of the video 2 x 650 pixels = 1300, place the original video ( in the top

[image: project settings for the Transparent video banner, double the height!]

and place the video with the alpha channel ( in the bottom and render it as a new video, thats it for the video. We have not added a button, but you could add a click region to the video directly on a button, just as you do with the normal banner. In our case we added click region (100 100 0 0) to make the whole banner clickable

[image: Adobe After Effect result of the in the top and the in the bottom]

Final result