Web Designer & Premium

Photo & Graphic Designer

Page & Layout Designer 11

Designer Pro X

3D Maker 7

Widget Guide : 365

Audio / Video

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

Here are a two 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 Content Catalog under Components > Print & Web Components > Audio / Video. 

YouTubeDailymotion Jukebox

YouTube

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

1

Import the YouTube widget from the Content Catalog. 

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 that appears underneath it. Now click on the Show More button.

3

YouTube displays highlighted code in a text box above a preview of the video.

In the area below the preview, you can customize properties for the video, such as changing the movie's height and width, enabling privacy mode and showing various titling and player options.

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 Jukebox

The Dailymotion Jukebox allows you to host videos according to criteria that you select. They can be your videos, your likes, videos from your groups or a range of other videos grouped together under various themes. Below is a Jukebox selection from the Dailymotion "tech" channel.

 

 

1

Import the Dailymotion Jukebox widget from the Content Catalog.

Dailymotion opens in the Create New Widget: Dailymotion window.

 

 

2

Scroll right down and select Jukebox from the Extras section at the bottom of the webpage.

 

 

3

The Jukebox widget opens allowing you to choose videos from a variety of channels. You can also choose videos from your own Dailymotion channel should you have one.

4
 Choose a channel from the dropdown list and select autoplay options if you need too
5
When you've finished, copy (Ctrl+C) the embed code to your clipboard. The code sits above a preview window. 
6

Click Insert.

The program displays a placeholder for your Jukebox. 

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

Resize the placeholder using the selection handles.

Click Preview to play your Jukebox.

Clicking on a video thumbnail plays the video in the main window.

About Xara | Press | News | Logos & Graphics | Resellers | Jobs at Xara | Contact Xara | Imprint | Privacy & Cookie Statement | EULA

Copyright © 2019 Xara Group Limited.

  • Developed in the EU