Audio / Video

It's now easier than ever to add media widgets to your web pages.

Here are a couple of examples from YouTube and Dailymotion showing how you can 'drag and drop' dynamic content from media sharing websites into your web pages, or share your own content with the minimum of effort.

Find the Audio / Video widgets in the Page Elements & Widgets section of the Designs Gallery.  

YouTube

Display any YouTube video on your web page and customize its size. The example below shows a Xara Web Designer 7 intro movie currently on YouTube.

1

Drag the YouTube widget from the Audio / Video Widgets section of the Page Elements folder in the Designs Gallery on to your web document page.

YouTube opens in the Create New Widget: YouTube window.

2

Locate the video you wish to embed in your web page and click the Share button.

YouTube displays the highlighted link to the video. Ignore this and click the Embed button below it.

3

YouTube displays highlighted code in a text box below the video.

In the area below the code box, you can customize properties for the video, such as changing the movie's height and width, enabling privacy mode and showing other suggested videos when your movie ends.

The code updates to incorporate your changes and remains selected. 

Press Ctrl + C on your keyboard to copy the code.

Click Insert at the bottom of the Create New Widget: YouTube window to add the movie to your web page.

4

The Create New Widget: YouTube window closes and the program displays a placeholder representing the movie. 

Click and drag the placeholder to the location on the web page where you want it to appear. But resizing the placeholder using the selection handles will only truncate the video itself, so that only part of the screen will be visible (if you reduce it) or create empty white space to two sides of it (if you enlarge it). 

To resize the movie, double click the placeholder to return to YouTube and reimport the video into the program by repeating steps 2-3 making sure you have specified the movie dimensions that you want in the customization controls.

 

5

Click Preview in the toolbar to view your movie in action. 

Dailymotion Wall

The Dailymotion Wall allows you to view dynamic thumbnails that link directly to host websites with the latest videos and news on a huge variety of topics.

Here we show a Science and Technology Dailymotion Wall.

Powered by Dailymotion
1

Drag the Dailymotion Wall widget from the Audio / Video Widgets section of the Page Elements folder in the Designs Gallery on to your web page document.

Dailymotion opens in the Create New Widget: Dailymotion window.

 

 

2

Select a list of videos to make up your videowall from a list of videowalls in the drop-down list to the right of the Create New Widget: Dailymotion window. 

Alternatively you can enter a URL to a Dailymotion channel to create a videowall out of the channel's first 23 listed videos. 

 

 

3

Once you've selected your videowall, customize its display options such as size, position of the Dailymotion logo and animation and pop-up options for the video thumbnails within the videowall.

When you're done customizing, click Generate Code to create the corresponding HTML code in the text box below the customization options. A preview of the videowall is also displayed. 

4

Click Insert.

The program displays a placeholder for your videowall. 

Click and drag the placeholder to the location on the web page where you want it to appear.

However you cannot resize the placeholder using the selection handles as this will only truncate the videowall (if you reduce it) or create empty white space to two sides of it (if you enlarge it).

To resize the videowall, double click the placeholder and complete steps 2 - 4. reimport it specifying the size you want in the Create New Widget window's customization controls.

Click Preview to play your videowall.

Clicking on a video thumbnail takes you to the hosting website which automatically plays the video.