How to work with the Video/Audio Object

Best Practices > Step 4 - Pages >

How to work with the Video/Audio Object

Previous pageReturn to chapter overviewNext page
Show/Hide hidden text

Double-click on a Video/Audio Object inserted in the page layout table, or select it and click on the to open the Video/Audio Object window. In this window, you can specify the name of the file to import, define its properties, decide whether to include it in the SiteMap and, if so, give the information necessary for it.

Click to expand/collapseHow to insert a video from YouTube™

Often, videos that you want to add to a website page are not stored on your computer, but they are files that have been published on an online platform such as YouTube™ or Vimeo.

If this is your case, there are two ways to import a video:

1. You can use the Video/Audio Object
Open YouTube™ and display the video you want to import.
Click on the Share button (under the video's preview) to customize the video's URL and copy it (using the Copy command in the context menu or the CTRL+C keys) from the field.
In WebSite X5, go to the page where you want to add the video and insert a Video/Audio Object, then open the window to create it.
In Video/Audio Object | General, type the URL of the video on YouTube™ in the YouTube/Vimeo Video URL field.
Set the Properties appropriately.
2.You can use the HTML Code Object
Open YouTube™ and display the video you want to import.
Click on the Share button (under the video's preview) and then on the Add code button. Select the options you want and copy  (using the Copy command in the context menu or the CTRL+C keys) the code shown in the field.
In WebSite X5, go to the page where you want to add the video and insert a HTML Code Object, then open the window to create it.
Use the button or the CTRL+V keys to paste the code you have copied from YouTube™.

When you insert a video from YouTube™ using a Video/Audio Object the original size is changed according to WebSite X5's settings. You will have more control over the size if you import videos from YouTube™ using the HTML Code Object.  

Click to expand/collapseHow to create a custom poster for starting a video

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.

With WebSite X5 you can, for example, create a poster with a mouseover effect and link it 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.