Embed YouTube videos with valid XHTML

[alinome.net]

The default HTML provided by YouTube is not valid XHTML. I wrote a very simple tag to embed YouTube videos with valid XHTML (I googled this site, and it seems there was nothing about this yet).

I put it in the wiki: Embed YouTube videos with valid XHTML.

[JEPad]

This is fantastic.  I wonder--is it possible to alter the User Defined Tag to allow YouTube videos to play in full size mode?  This requires adding parameters along the lines of in a couple of places in the code.  I'm not expert enough to change it, although I managed to use your 'youtube_video' tag for my site.

Thanks so much,
JEP

[alinome.net]

is it possible to alter the User Defined Tag to allow YouTube videos to play in full size mode?  This requires adding parameters along the lines of in a couple of places in the code.

Thanks for the suggestion. I've found the YouTube Embedded Player Parameters, but I'm not pretty sure how to use them with the valid XHTML version. Maybe this way:

Code: Select all

/*
Embed a YouTube video with valid XHTML
Parameter: url
Reference: http://www.bernzilla.com/item.php?id=681
*/
echo '<object class="youtube" type="application/x-shockwave-flash" width="425" height="350"';
echo ' data="'.$params['url'].'">';
echo '<param name="movie" value="'.$params['url'].'" />';
echo '<param name="allowFullScreen" value="true" />';
echo '</object>';

I cannot test it right now. May you try it?

[JEPad]

It works!  Thanks!

[alinome.net]

It works!  Thanks!

Glad to know. I updated the wiki with a note about additional video parameters and a link to this thread. It can be useful for others.

[confiq]

Hi alinome.net...
Your code inspired me to write this one...

Code: Select all

function smarty_cms_function_youtube($params, &$smarty)
{
	global $gCms;
	if(isset($params['id']))
	{
		$id = $params['id'];
	}
	elseif(isset($params['url']))
	{
		list(,$url) = explode('?',$params[url],2);
		parse_str($url,$to);
		$id = $to[v];
	}
	if(isset($id)) {
		$var = <<<EOF
<object width="425" height="355">
<param name="movie" value="http://www.youtube.com/v/$id"></param>
<param name="wmode" value="transparent"></param>
<embed src="http://www.youtube.com/v/$id" type="application/x-shockwave-flash" wmode="transparent" width="425" height="355">
</embed>
</object>
EOF;
	}
	else $var = "error calling {youtube} function";
return $var;
}

I hope you'll like it.... enjoy

[smriyaz]

config
But your code seems NOT to be a valid xhtml. Is it valid xhtml?
Thanks.

[confiq]

i didn't check but it's copy paste from your code...
I didn't change HTML a bit...

[JohnnyB]

This was very helpful to create a tag for an editor to use in Articles and Pages, etc.  But, it would not play in IE7/8. So, although this is not completely valid b/c it uses IE conditional comments, this modification will play in IE browsers.

Code: Select all

/*
Embed a YouTube video with valid XHTML
Parameter: url
Reference: http://www.bernzilla.com/item.php?id=681
Cross Browser Compatible Version - Tested in IE7, 8, Firefox 3+, Safari 4
*/
echo '<![if !IE]><object class="youtube" type="application/x-shockwave-flash" width="445" height="364" data="'.$params['url'].'"><![endif]>';
echo '<!--[if IE]><object class="youtube" width="445" height="364" data="'.$params['url'].'"><![endif]-->';
echo '<param name="movie" value="'.$params['url'].'" />';
echo '<param name="wmode" value="transparent" />';
echo '<param name="allowFullScreen" value="true" />';
echo '<param name="allowscriptaccess" value="always" />';
echo '<!--[if IE]>
      <embed src="'.$params['url'].'" type="application/x-shockwave-flash" wmode="transparent" allowfullscreen="true" allowscriptaccess="always" width="445" height="364"></embed>
      <![endif]-->';
echo '</object>';

[bryan]

Thanks for the UDT. It worked great! I used the code submitted by mww and added 'height' and 'width' parameters since I was embedding videos with different aspect ratios. It will default to 425x355 if nothing is entered though. I also put the browser detection in php.

Code: Select all

/*
Embed a YouTube video with valid XHTML
Parameter: url, width, height
Cross Browser Compatible Version - Tested in IE7, 8, Firefox 3+, Safari 4
*/
if (isset($params['width'])) { $width = $params['width']; } else { $width == 425; }
if (isset($params['height'])) { $height = $params['height']; } else { $height == 355; }
$browser = get_browser();
if($browser->browser == 'IE') {
	echo '<object class="youtube" width="'.$width.'" height="'.$height.'" data="'.$params['url'].'">\n';
	echo '<embed src="'.$params['url'].'" type="application/x-shockwave-flash" wmode="transparent" allowfullscreen="true" allowscriptaccess="always" width="'.$width.'" height="'.$height.'"></embed>';
} else {
	echo '<object class="youtube" type="application/x-shockwave-flash" width="'.$width.'" height="'.$height.'" data="'.$params['url'].'">';
}
echo '<param name="movie" value="'.$params['url'].'" />';
echo '<param name="wmode" value="transparent" />';
echo '<param name="allowFullScreen" value="true" />';
echo '<param name="allowscriptaccess" value="always" />';
echo '</object>';

[ElBombo]

Thanks for the UDT. It worked great! I used the code submitted by mww and added 'height' and 'width' parameters since I was embedding videos with different aspect ratios. It will default to 425x355 if nothing is entered though. I also put the browser detection in php.

Code: Select all

/*
Embed a YouTube video with valid XHTML
Parameter: url, width, height
Cross Browser Compatible Version - Tested in IE7, 8, Firefox 3+, Safari 4
*/
if (isset($params['width'])) { $width = $params['width']; } else { $width == 425; }
if (isset($params['height'])) { $height = $params['height']; } else { $height == 355; }
$browser = get_browser();
if($browser->browser == 'IE') {
	echo '<object class="youtube" width="'.$width.'" height="'.$height.'" data="'.$params['url'].'">\n';
	echo '<embed src="'.$params['url'].'" type="application/x-shockwave-flash" wmode="transparent" allowfullscreen="true" allowscriptaccess="always" width="'.$width.'" height="'.$height.'"></embed>';
} else {
	echo '<object class="youtube" type="application/x-shockwave-flash" width="'.$width.'" height="'.$height.'" data="'.$params['url'].'">';
}
echo '<param name="movie" value="'.$params['url'].'" />';
echo '<param name="wmode" value="transparent" />';
echo '<param name="allowFullScreen" value="true" />';
echo '<param name="allowscriptaccess" value="always" />';
echo '</object>';

I tried your code, because I liked the control over size, but there is an error-code above the embedded youtube object:

Warning: get_browser() [function.get-browser]: browscap ini directive not set in [link to root of the cmsms mle installation]/lib/content.functions.php(771) : eval()'d code on line 8

I'm using CMSMS 1.6.6 mle , PHP 5.2.10

Somebody any pointers? I'm not that skilled in PHP.

[voorhammr]

Can anyone tell me how to add this youtube tag to the CMS?
Do i need to make an PHP file? or do i need to donwload one?

Hope someone can help this newbie.

[tphuocthai]

Can anyone tell me how to add this youtube tag to the CMS?
Do i need to make an PHP file? or do i need to donwload one?

Hope someone can help this newbie.

Just create a user defined tag (Extensions -> User Defined Tag).

Click on Add User Defined Tag

Enter the tag name and paste the code in to the Code box.

That's it.

[manuel]

Hi all,

For embedding youtube video's with full screen button and not displaying related video's afterwards, create a user-defined tag with the following code:

echo '';
echo '';
echo '';
echo '';
echo '';

Greetings,
Manuel

[bryan]

I tried your code, because I liked the control over size, but there is an error-code above the embedded youtube object:

Warning: get_browser() [function.get-browser]: browscap ini directive not set in [link to root of the cmsms mle installation]/lib/content.functions.php(771) : eval()'d code on line 8

I'm using CMSMS 1.6.6 mle , PHP 5.2.10

Somebody any pointers? I'm not that skilled in PHP.

After doing some research it seems that there are some compatability issues between browscap.ini and the later versions of PHP. My server is running php 5.1.6 and I don't seem to have any trouble calling to get_browser(). You can use JQuery.browser to create a conditional statement instead of PHP:
http://docs.jquery.com/Utilities/jQuery.browser