It's now easier than ever to add media widgets to your web pages. Choose from a range that includes MAGIX media sharing widgets, YouTube videos, Flickr slideshows and the Grooveshark music sharing widget.
Here are a few examples from Grooveshark, YouTube, MAGIX and Dailymotion showing how you can 'drag and drop' dynamic content from media sharing websites into your web pages, or share your own content such as videos, images and audio, with the minimum of effort.
Find the Audio / Video widgets in the Page Elements & Widgets section of the Designs Gallery.
Grooveshark is a popular music sharing service which allows you to create, share, and embed music playlists into your own website. You can also upload your own music to the site as well as choosing your favorite tracks from Grooveshark's massive audio collection.
The example below shows an embedded player with playlist.
Note: You have to first create a Grooveshark online account at http://grooveshark.com/ before inserting the Grooveshark widget into your web page.
1
Drag the Grooveshark widget from the Audio / Video Widgets section of the Page Elements folder in the Designs Gallery on to your web document page.
2
Grooveshark opens in the Create New Widget: Grooveshark window. You can search for music, and also create playlists through the widget.
3
The easiest way to create a playlist is to search for a track and then right click on it to select "New Playlist". You'll be prompted to give your playlist a name and you can then carry on right clicking and adding tracks to your playlist.
Any changes you make to the playlist will be reflected in the embedded widget, so to add or delete songs from your widget is simple, as you only have to make changes in one place.
4
When you've finished compiling your playlist click on "My Music". Right click on the playlist title, which will be displayed on the left of the window and select the "Share Playlist" option.
If you chose to upload your own music then that too would appear as one of your playlists. To learn how to upload your own music visit the the Grooveshark help pages at http://help.grooveshark.com/
5
Click on the "More" option in the Share Playlist dialog, and then select "Embed" to display the widget code.
6
The widget embed code is displayed. This is where you can customize your widget's appearance. You can resize the widget, choose a theme, and also change colors.
When you've finished your changes - click on "Copy to Clipboard".
7
In the Create New Widget window click "Insert" and the Grooveshark placeholder will appear in your webpage document. Drag the placeholder to reposition and then click on Preview in the toolbar to see the Grooveshark player with your playlist embedded on your webpage.
To resize the widget, click on the placeholder and select "Edit" to return to the Grooveshark widget editing window, then repeat steps 4 to 7.
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.
Pick your favorite pics and using Magix Online Album, display them in an automated slideshow on your website.
Below is an example slideshow.
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
Drag the MAGIX Online Album widget from the Audio / Video Widgets section of the Page Elements folder in the Designs Gallery on to your web page document.
2
In the Create New Widget: MAGIX Online Album Wizard window, log in to your MAGIX Online World account.
The Create New Widget: Magix Online Album window is displayed.
If you have existing photo albums, these are listed on the left of the window. Click on the one you want. It displays in the preview box on the right. Go to step 4 to see how to import your albums into your web page document.
If you don't have any existing photo albums, go to step 3 to see how to create new content.
3
However if you want to upload content for a new MAGIX online album, click Upload Content to add new photos, audio files and videos.
In the Upload Media window, click Select File to search your computer for photos, videos and music.
Using the controls in the Upload Media window, you can put these in an existing or new folder, which groups the files to be inserted into your web page, and you can also password-control access to this content on your website.
Then click Upload.
In the MAGIX Online Media Manager, click on the album you want on the left to highlight it, then click the 'options' icon to the immediate right of the folder name to display a drop-down list.
These list options let you select background music for your slideshow, as well as allowing you to control who sees it when it's on your website. To add more content, you can click Upload in the list or in the Online Media Manager toolbar.
When you're happy with the slideshow, close the MAGIX Online Media Manager.
Click Update Album List in the Create New Widget: MAGIX Online Album Widget to view the new album folder in the My Albums list.
Click the album, which is displayed in the preview box on the right.
4
Choose size and background color options in the Create New Widget: MAGIX Online Album Widget. Then click Insert to add the photo album to your web page.
The program displays a placeholder for your photo album. 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 slideshow (if you reduce it) or create empty white space to two sides of it (if you enlarge it).
To resize the slideshow, double click the placeholder and reimport it from MAGIX, this time making sure you have specified the slideshow dimensions that you want in the Create New Widget window's customization controls.
Click Preview to play your slideshow and its soundtrack, if you added one.
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.
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.
Sign in | Register
United States
United Kingdom
Euro
