Embed YouTube videos with valid XHTML

alinome.net · **Posted:** Thu Feb 28, 2008 12:22 pm

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 · **Joined:** Sat Sep 27, 2008 9:58 pm **Posts:** 4

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 · **Posted:** Tue Sep 30, 2008 10:12 am

JEPad wrote:

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:

/*
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 · **Joined:** Sat Sep 27, 2008 9:58 pm **Posts:** 4

It works! Thanks!

alinome.net · **Posted:** Wed Oct 01, 2008 10:36 am

JEPad wrote:

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 · **Posted:** Fri Oct 10, 2008 4:55 pm

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

Code:

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 · **Joined:** Thu Oct 09, 2008 9:43 am **Posts:** 7

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

confiq · **Posted:** Mon Oct 13, 2008 3:20 pm

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

mww · **Posted:** Thu Sep 10, 2009 6:54 pm

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:

/*
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 · **Posted:** Tue Oct 27, 2009 4:07 pm

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:

/*
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 · **Joined:** Wed Oct 15, 2008 11:03 am **Posts:** 21

bryan wrote:

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:

/*
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 · **Joined:** Tue Nov 10, 2009 10:04 pm **Posts:** 68

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 · **Joined:** Tue Oct 21, 2008 6:09 am **Posts:** 2

voorhammr wrote:

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 · **Joined:** Fri Nov 30, 2007 9:15 am **Posts:** 329

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 '

';

Greetings,
Manuel

bryan · **Posted:** Wed Nov 18, 2009 4:47 pm

ElBombo wrote:

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

Embed YouTube videos with valid XHTML

Who is online