Compatibility:

WebSite X5 Evo and Pro

The poster is a static preview image of a video. It often corresponds to the first photogram, but you can prepare your own front cover that invites visitors to click on it and watch your video.


There are at least two ways of adding a poster image that the user can click to play the video. Let's check them out.


1. With the options available in the Video/Audio Object

The easiest way for creating a poster image is using the option available directly in the Video/Audio Object:

  • Create the image to be used as a poster using an external graphic tool.
  • Open your WebSite X5 project and go to the page you want to edit: add the Video/Audio Object and access the settings window.
  • Import the video file, then set up the parameters like Size and Startup Type.
  • Import the image you prepared using the Poster Image option.

By proceeding in this way, you do not need to set up any links on the poster image. Depending on the Startup Type chosen, users will be able to start playing the video by clicking on the poster (Manual Startup) or see it start automatically when the page opens, when it is visible, or when they hover their mouse over it.

 

2. With the Image Object

Alternatively, you can create a poster image with the Image Object. In this case, you can activate a mouseover effect and set a link so to open the Video in a Showbox window:

  • Use an external graphic program to prepare the picture to use as your poster, remembering that you will need two versions: one for the "normal" state, and another for the "mouseover" state.
  • In WebSite X5, go to the page you want to work on and insert an Image Object, then open the window to add the contents and import the "normal" file.
  • In Image Object > Display select "Superimposed image" as the Mouse Over Effects and then import the "mouseover" file. The two images should have the same size, so it won't be necessary to align them.
  • Complete your button by adding the link: go back to Image Object > General, click on to open the Link window, select File or URL, specifying that the resource must be opened in a Showbox, and then enter the name of the video file to import.