How to add html text to youtube highslide

[RHA82]

Hello,
I am trying to ad text with links to an highslide youtube link:

Code: Select all

<a href="http://www.youtube.com/v/$video{'id'}&hl=nl&fs=1&autoplay=1&rel=0" class="highslide" onclick="return openYouTube(this)"><img src="$video{'foto'}{'src'}" alt="" border="0"></a>

this is the javascript I use:

Code: Select all

<script type="text/javascript">
// Apply the Highslide settings
hs.outlineType = 'rounded-white';
hs.outlineWhileAnimating = true;
hs.allowSizeReduction = false;
// always use this with flash, else the movie will be stopped on close:
hs.preserveContent = false;
hs.wrapperClassName = 'no-move';

hs.registerOverlay({
	//slideshowGroup: 'group1',
	overlayId: 'closebtn',
	position: 'right',
	fade: 2, 
	useOnHtml: true
	});

// create a shorthand function so we don't need to put all this in the opener's onclick
function openYouTube(opener) {
	var returnValue;
	
	// Safari Mobile doesn't have Flash, so we just let the device use the built-in 
	// YouTube viewer.
	
		
	if (/(iPhone|iPod|iPad)/.test(navigator.userAgent)) {
		opener.href = opener.href.replace('/v/', '/watch?v=');
		returnValue = true;		
	}

	else returnValue = hs.htmlExpand(opener, { 
		objectType: 'swf', 
		objectWidth: 480, 
		objectHeight: 385, 
		width: 480, 
    align: 'center',
		swfOptions: { 
			params: { 
				allowfullscreen: 'true' 
			}
		}, 
		maincontentText: 'You need to upgrade your Flash player' 
	});
	
	return returnValue;
}  
</script>

I have also tried this link:

Code: Select all

<a href="http://www.youtube.com/v/$video{'id'}&hl=nl&fs=1&autoplay=1&rel=0" class="highslide" onclick="return hs.htmlExpand(this, { contentId: 'highslide_$video{'id'}' ,dimmingOpacity: 0.9 , width: 650})" class="highslide"><include file="//inc/nl/inputtext_begin.lp"><img src="$video{'foto'}{'src'}" alt="" border="0"><include file="//inc/nl/inputtext_eind.lp"></a>

But no effect.

How can I add text and links under the youtube video in the highslide.
Iframe doesn't quite work because of the PERL code on the page that dynamicly loads the uploaded youtube movies on the page.


Hope someone can give me some tips ?

[RoadRash]

Hi,

You can try to use a highslide-caption div.

Code: Select all

<a href="http://www.youtube.com/v/$video{'id'}&hl=nl&fs=1&autoplay=1&rel=0" class="highslide" onclick="return openYouTube(this)"><img src="$video{'foto'}{'src'}" alt="" border="0"></a>
<div class="highslide-caption">
	Text and links
</div>

[RHA82]

Thanx for the help it worked!!!

[mdufresne]

You has converted most, if not all of the uploaded videos to MP4. This means that FLASH is no longer required

the embed code looks like this:

<iframe title="YouTube video player" class="youtube-player" type="text/html" width="480" height="390" src="http://www.youtube.com/embed/mlKKSXXULyM?rel=0" frameborder="0"></iframe>

What would be the proper Highslide incantation to make this work?

thanks in advance

Marc Dufersne

[RoadRash]

Hi Marc,

I think this should work in all browsers:

Code: Select all

<a href="http://www.youtube.com/embed/mlKKSXXULyM?rel=0" onclick="return hs.htmlExpand(this, { objectType: 'iframe', width: 480, height: 390, wrapperClassName: 'draggable-header no-footer', objectLoadTime: 'after', preserveContent: false } )">
	Open YouTube
</a>

[mdufresne]

aha, yes.. indeed., this works just fine
thanks.

Marc