WD6: adding a video play list on same page

**Clevo** · 02 December 2010, 10:22 AM

Hello everyone.

I'm impressed with the level of help I have been reading here over the last few days so I thought I could ask

This is my first post and I'm just going to get stuck into it:

I'm using the Magix Xara Web Designer 6 download version ater using Avanquest's Web Easy Pro 8 for a year or so to build fairly simple websites. I'm finding WD6 very easy to use. WD6 has a few more features I was keen to ultilise.

To cut a long story short I'm helping a friend build a website and we're near the final stages and just playing with some themes at settling on copy.

She has expressed a desire to copy an embedded video playlist like this one:

http://www.stephensheridan.com/commercial.htm

I like it too and in IE8 I can look at the code through the developers tools because I am curious at how it was done: for e.g.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<title>STEPHEN SHERIDAN :: DEMO REELS</title>
<head>
<style>
.text { font:7pt verdana; background-color:black; color:slategray; }
.dimtext { font:7pt verdana; background-color:black; color:dimgray; }
a:link { font:7pt verdana; text-decoration:none; color:slategray; }
a:visited { font:7pt verdana; text-decoration:none; color:slategray; }
a:active { font:7pt verdana; text-decoration:none; color:slategray; }
a:hover { font:7pt verdana; text-decoration:none; color:white; }
</style>
<script type="text/javascript">
function loadvideo(video) {
	var vimeoId = "";

	switch (video)
	{
		case 1: // Montage
			vimeoId = '11494019';
			break;
		case 2: // Acura
			vimeoId = '12880983';
			break;
		case 3: // Adidas
			vimeoId = '12881208';
			break;
		case 4: // Apple
			vimeoId = '12904644';
			break;
		case 5: // VW
			vimeoId = '12881296';
			break;
	}

	divMovie.innerHTML = '<iframe src="http://player.vimeo.com/video/' + vimeoId + '?color=ffffff" width="600" height="300" frameborder="0"></iframe>';

}
</script>
</head>
<body bgcolor="#000000" onload="javascript:loadvideo(1);">
<table width="100%" height="100%">
<tr>
<td width="100%" align="center">
<table width="768" cellpadding="0" cellspacing="0" border="0">
<tr><td align="center" colspan="6"><img src="./images/Heading.jpg" width="604" height="87"/></td></tr>
<tr>
<td align="center" colspan="6">
<div id="divMovie"></div>
</td>
</tr>
<tr><td align="center" colspan="6">&nbsp;</td></tr>
<tr>
	<td align="left"><a href="default.htm">&lt;&lt;&nbsp;home</a></td>
	<td align="left"><span class="text">:: </span><a href="javascript:loadvideo(1);">montage</a></td>
	<td align="left"><span class="text">:: </span><a href="javascript:loadvideo(2);">acura</a></td>
	<td align="left"><span class="text">:: </span><a href="javascript:loadvideo(3);">adidas</a></td>
	<td align="left"><span class="text">:: </span><a href="javascript:loadvideo(4);">apple</a></td>
	<td align="left"><span class="text">:: </span><a href="javascript:loadvideo(5);">volkswagen</a></td>
</tr>
</table>
</td>
</tr>
</table>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-12162553-1");
pageTracker._trackPageview();
} catch(err) {}</script>
</body>
</html>

I know very little about HTML code but from this I can tell an iframe is used and some neat switching code and ll the videos are hosted on the vimeo site (I suspect that vimeo pro membership provide the playlist code too?)

I've looked at several free video playlist code and not really seen anything like this. I particularly like how the titles are across the bottom of the page and you can click on a title to watch.

I'm wondering if WD6 can handle this set up and how do I go about including this code and setting up an iframe.

here is the site I'm currently working on (some pages are broken I know)

http://home.exetel.com.au/coopertonks/build4/index.htm

Also... a side question. The text on the navbar seems a little blurry to me. Is there a way to sharpen that up?

Thanks for reading this far and considering answering

**gwpriester** · 02 December 2010, 07:11 PM

Nice looking website.

You will need to find a script (try a Google search for multi-video playlist script) and then add the script to your page using a Placeholder.

Search the Help > Index > Placeholder Objects for more information.

If part of the script needs to be added in the HEAD portion of the HTML document, click the yellow Names tag icon on the Infobar, and name the placeholder object <head>.

**Clevo** · 02 December 2010, 10:43 PM

Thanks

With the script I pasted in the OP can you identify which bits I need to copy? I think I want to use the same script but change the font and layout.

I've looked at several free scripts but the playlist styles are always "you tube" like.