Embed YouTube videos with valid XHTML

Do something cool with CMS? Show us ...
This board is for 'Answers', and the discussion of answers... Not for questions.
gigicakent
New Member
New Member
Posts: 8
Joined: Sat Nov 28, 2009 2:26 am

Re: Embed YouTube videos with valid XHTML

Post by gigicakent »

ok so i have added this code to cms using user defined tag

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>';
If i want to show for example this video   http://www.youtube.com/watch?v=Y75DjjZm60M   , what do i need to write in my page? what code ?
User avatar
Gregor
Power Poster
Power Poster
Posts: 1874
Joined: Thu Mar 23, 2006 9:25 am
Location: The Netherlands

Re: Embed YouTube videos with valid XHTML

Post by Gregor »

Assume you have named your UDT 'youtube'.

{youtube_video url="http://www.youtube.com/v/Y75DjjZm60M"}

Gregor
brentnl
Power Poster
Power Poster
Posts: 493
Joined: Mon May 11, 2009 4:35 pm

Re: Embed YouTube videos with valid XHTML

Post by brentnl »

I made the following UDT, so my customers only have to fill in the ID of the video... I did this because sometimes a users filled in the link this way: http://www.youtube.com/watch?v=imgAssCogL4 instead of http://www.youtube.com/v/imgAssCogL4 and the movie won't work that way.

So the following code is needed..

Code: Select all

echo '<object width="425" height="344">';
echo '<param name="movie" value="'.$params['url'].'&rel=0"></param>';
echo '<param name="allowFullScreen" value="true"></param>';
echo '<embed src="http://www.youtube.com/v/'.$params['id'].'&rel=0&hl=en&fs=1&color1=0x313131&color2=0x000000&border=1" type="application/x-shockwave-flash" ';
echo 'allowfullscreen="true" width="425" height="344"></embed>';
echo '</object>';
to use this tag:

Code: Select all

{youtube id="imgAssCogL4"}
joecannes
Forum Members
Forum Members
Posts: 93
Joined: Mon Nov 26, 2007 5:00 pm
Location: Montreal, Quebec

Re: Embed YouTube videos with valid XHTML

Post by joecannes »

Hi There,

I tried this code, but when I dont input the width and height values, the default values (width=425 and height=355) dont appear.

Anyone know what reason why?

Thanks,

JC

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: 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>';
brentnl
Power Poster
Power Poster
Posts: 493
Joined: Mon May 11, 2009 4:35 pm

Re: Embed YouTube videos with valid XHTML

Post by brentnl »

Could anyone adjust the code for use with Vimeo? I've made my own UDT, but it isn't valid..

Code: Select all

echo '<div class="vimeo">';
echo '<object width="369" height="207">';
echo '<param name="allowfullscreen" value="true" />';
echo '<param name="allowscriptaccess" value="always" />';
echo '<param name="wmode" value="transparent" />';
echo '<param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id='.$params['id'].'&server=vimeo.com&show_title=1&show_byline=1&show_portrait=0&color=&fullscreen=1" />';
echo '<embed src="http://vimeo.com/moogaloop.swf?clip_id='.$params['id'].'&server=vimeo.com&show_title=1&show_byline=1&show_portrait=0&color=&fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" wmode="transparent" width="369" height="207"></embed>';
echo '</object>';
echo '</div>';
bryan

Re: Embed YouTube videos with valid XHTML

Post by bryan »

I made a youtube plugin with instructions included. Just change the file extension from .txt to .php and put it in your cmsms plugins folder. Let me know what you think.

http://dev.cmsmadesimple.org/project/files/839
Last edited by bryan on Mon Apr 05, 2010 8:29 pm, edited 1 time in total.
User avatar
manuel
Power Poster
Power Poster
Posts: 353
Joined: Fri Nov 30, 2007 9:15 am

Re: Embed YouTube videos with valid XHTML

Post by manuel »

Nicely done Bryan!
This sure makes it easier to implement it for new sites!
(instead of having to create UDT's for which I first manually have to turn off mod_security every time!)

ps: The only features I'm missing are the full screen button and the possibility to not show related video's at the end of the movie...

for the fullscreen button, it's the allowFullScreen value that has to be entered
for disabling related video's it's the &rel=0 parameter that has to be entered (if my memory is correct)

Below you can find my previous post:
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
Again, thanks for sharing your plugin!!  ;D

Greetings,
Manuel
Do you like your open source cms? Buy from the CMSMS partners || Donate
bryan

Re: Embed YouTube videos with valid XHTML

Post by bryan »

manuel wrote: ps: The only features I'm missing are the full screen button and the possibility to not show related video's at the end of the movie...
Thanks, Manuel. I'm glad someone found it useful. I've updated the plugin to include the related and fullscreen parameters.

The latest version is called webvideo and is available in the forge - http://dev.cmsmadesimple.org/project/files/839
Last edited by bryan on Mon Apr 05, 2010 8:28 pm, edited 1 time in total.
zanga
Forum Members
Forum Members
Posts: 11
Joined: Sun Mar 21, 2010 6:32 pm

Re: Embed YouTube videos with valid XHTML

Post by zanga »

Hi,
How do I add your plugin?

Do I use it like this? {youtube_video url="http://www.youtube.com/v/Y75DjjZm60M"}

Thanks !
bryan

Re: Embed YouTube videos with valid XHTML

Post by bryan »

zanga wrote: Hi,
How do I add your plugin?

Do I use it like this? {youtube_video url="http://www.youtube.com/v/Y75DjjZm60M"}

Thanks !
1. download the webvideo.function.php file from http://dev.cmsmadesimple.org/project/files/839.
2. upload to your /plugins directory.

embed your movie like this:
{webvideo movie='pqfPjBOK2l4'}

Instructions and other parameters are available in the cmsms control panel under Extensions » Tags » webvideo.
Last edited by bryan on Mon Apr 05, 2010 8:30 pm, edited 1 time in total.
zanga
Forum Members
Forum Members
Posts: 11
Joined: Sun Mar 21, 2010 6:32 pm

Re: Embed YouTube videos with valid XHTML

Post by zanga »

Thanks ! Works like a charm !
jonnytm
Forum Members
Forum Members
Posts: 14
Joined: Mon Jan 04, 2010 9:50 pm

Re: Embed YouTube videos with valid XHTML

Post by jonnytm »

Absolutely fantastic!!  8)

Thanks!
mw
Forum Members
Forum Members
Posts: 159
Joined: Mon Aug 25, 2008 8:38 pm
Location: Comox Valley, BC, Canada

Re: Embed YouTube videos with valid XHTML

Post by mw »

if interested I wrote a module recently that does a similar thing, one simply needs the video ID .
the module creates a catalog type listing of video catagorys and will list video's with a dynamically created thumbnail from the video itself.
it's here if you want it:
http://dev.cmsmadesimple.org/projects/youtubeplayer
bryan

Re: Embed YouTube videos with valid XHTML

Post by bryan »

I've created a replacement for the youtube plugin and renamed it webvideo. It's the same basic idea (generates valid xhtml), but along with the default youtube player, it also supports dailymotion, google, metacafe, myspace, and vimeo.
To play movies other than a youtube, simply add the src parameter to use one of the supported stream sources:

Code: Select all

{webvideo src='metacafe' movie='yt-BN5sYBTg4cQ' width='400' height='345'}
http://dev.cmsmadesimple.org/project/files/839

Instructions and other parameters are available in the cmsms control panel under Extensions » Tags » webvideo.
Last edited by bryan on Mon Apr 05, 2010 8:25 pm, edited 1 time in total.
camillep
Forum Members
Forum Members
Posts: 44
Joined: Thu Sep 16, 2010 11:56 pm

Re: Embed YouTube videos with valid XHTML

Post by camillep »

This works great! Thank you very much. How do I set the autoplay to off? I inserted a '0' in the function.webvideo.php file, but the videos still autoplay. Is there another place to set the autoplay to off?
Locked

Return to “Tips and Tricks”