Media

Xara Designer Pro 6 and Web Designer 6 now make it easier than ever to add media widgets to your web pages. Choose from a range that includes YouTube and Yahoo! videos, Flickr slideshows and Flashwidgetz.

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 with the minimum of effort.

YouTube

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

1

Drag the YouTube widget from the Media Widgets section of the Designs Gallery on to your Designer Pro 6 or Web Designer 6 web 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 <Embed> button below it.

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

3

In the area below the code box, you can customize properties for the video, such as changing the color of the play bar, adding a colored border, enabling privacy mode or specifying a size for the movie.

The code updates to incorporate your changes. 

Click in the box containing the code to select it, then 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 Designer Pro 6/Web Designer 6 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, reimport it from YouTube, this time 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. 

Magix Download Box

The MAGIX Download Box lets you share your data securely with your website visitors, with the ability to password-protect any files and folders so that only authorized users can download information via your website.

Click on the example below to download image and video files.

Note: You have to first create a MAGIX online account at https://www.magix-online.com before inserting the MAGIX Online Album widget into your web page.

1

In Designer Pro 6 or Web Designer 6, drag the MAGIX Download Box widget from the Media Widgets section of the Designs Gallery on to your web page.

 

2

In the Create New Widget: MAGIX Widget Wizard window, log in to your MAGIX Online World account.

The first 'Select a Wizard' step of the widget wizard is displayed.

3

Do one of the following:

  • Click Open Widget to open an existing wizard that you've saved previously

  • Click a template design for your download box in the Select a Template display then click the Forward button at the bottom of the window to create a new widget

The second 'Customize' step of the widget wizard is displayed.

4

Do one of the following:

  • Click on an existing widget to customize it

  • Click Upload to select any image, music, video or other file of your own to insert and customize

Uploaded media is displayed at the bottom of the Create New Widget window.

Click the Add button to add uploaded media to the preview pane.

Change the widget's font, background and frame color and add password protection as required in the customization settings to the left of the window.

When you're finished customizing, click Forward to display the third 'Insert' stage of the wizard.

5

Click Save and then Insert to add the widget to your web page. 

Designer Pro 6 or Web Designer 6 displays a placeholder for your widget. 

Click Preview in the toolbar to view your widget 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 News and Politics Dailymotion Wall.

1

Drag the Dailymotion Wall widget from the Media Widgets section of the Designs Gallery on to your Designer Pro 6 or Web Designer 6 web page.

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.

Designer Pro 6 or Web Designer 6 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, 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.