Embed YouTube videos with valid XHTML

[bryan]

I had to make a change to the code. Autoplay is now disabled by default in Youtube. You'll need to download the latest version from the forge:
http://dev.cmsmadesimple.org/project/files/839

[manuel]

Thx for maintaining this Bryan, i love it!

Greetings,
Manuel

[Wiedmann]

Embedding a flash movie is also possible with the SWFObject tag from the forge. E.g.:

Code: Select all

{swfobject swf='http://www.youtube.com/v/EV_EvE5UUSc?fs=1' width='480' height='385' fallowfullscreen='true' fallowscriptaccess='always'}

[bryan]

Thanks for the tip, Wiedmann. I originally made the webvideo plugin to fill a very specific need, i.e. - Display video from one of a handful of popular streaming media providers on the fly while using valid XHTML without the need for a media manager.
The swfobject tag will do this just as well and is far more versatile than my webvideo tag. There are a few minor features included in the webvideo tag that make formatting a little easier, but I guess the only reason to continue using it is in the rare case that you would want a plugin that doesn't require javascript.

[Wiedmann]

but I guess the only reason to continue using it is in the rare case that you would want a plugin that doesn't require javascript.

In this case you can use the param "embed='static'", which is also working for browsers without JS support. e.g.:

Code: Select all

{swfobject swf='mymovie.swf' embed='static'}

Just found a bug in the swfobject help :-/ The default for embed is 'dynamic' and can be set to 'static'. Not 'true' or 'false' like you can read in the help.

Of course, in addition to the swfobject tag, a user must also download the swfobject.js (and put it at the right place) in a separate step. Maybe that's a feature request for swfobject: Changing the tag to a module. Thus it's possible to package the tag together withe the JS (and expressinstall.swf).

BTW:
I see an advantage for the webvideo tag (maybe in combination with swfobject):
If e.g. Youtube is changing it's URIs and params for viewing videos, you must change the the new URI only at one place, in the tag, and not in all pages.
 

[bryan]

I just uploaded a new release of the {webvideo} tag:
http://dev.cmsmadesimple.org/projects/webvideo

I've removed reference to $gCms for compatibility with CMSMS 1.9. There's really no point in keeping it in beta since I don't have any immediate plans to make further enhancements to it (but I'm open to suggestions ).

Just found a bug in the swfobject help :-/ The default for embed is 'dynamic' and can be set to 'static'. Not 'true' or 'false' like you can read in the help.

You may want to submit a bug report. I'll have to give the {swfobject} tag a try in my next project.

[Wiedmann]

Just found a bug in the swfobject help :-/ The default for embed is 'dynamic' and can be set to 'static'. Not 'true' or 'false' like you can read in the help.

Fixed in SVN.

Of course, in addition to the swfobject tag, a user must also download the swfobject.js (and put it at the right place) in a separate step.

Fixed in SVN. (If there is no local copy of "swfobject.js", the version from the Google API library is used)

In this case you can use the param "embed='static'", which is also working for browsers without JS support.

Another fix in SVN. ('static' is not working in all browsers, if the JS is not loaded in HTML head section. As of CMSMS 1.9 the JS part is now going to the head section instead to the body)

Maybe someone want test this.

[manuel]

Hi Bryan,

I was using the webvideo plugin inside of a jscrollpane (like an iframe but you can easily put a cmsms content block inside of it) and noticed the frame didn't expand in height correctly (it didn't seem to detect the height of the embedded objects).

To fix this i had to add a tag around the object using the same height and width as the youtube embed.

Here's the code i added (which i'm hoping will be included in version 1.1 of webvideo  ;D)

Code: Select all

$forceheight = isset($params['forceheight']) ? $params['forceheight']:0;
$forceheightclass = isset($params['forceheightclass']) ? 'class="'.$params['forceheightclass'].'" ':'';
$forceheightid = isset($params['forceheightid']) ? 'id="'.$params['forceheightid'].'" ':'';

UPDATE: replace the code below with the code from my next post!!

Code: Select all

// render valid xhtml
if ($forceheight == 1) {echo '<button '.$forceheightclass.$forceheightid.'style="width:'.$width.'px; height:'.$height.'px; display:block; border:1px solid transparent; background:transparent;">';}
echo '<object type="application/x-shockwave-flash" '.$class.$id.'style="width:'.$width.'px; height:'.$height.'px;" data="'.$url.'">'."\n".'<param name="movie" value="'.$url.'" />'."\n".$fsparam.$wmode.$script.'</object>'."\n";
if ($forceheight == 1) {echo '</button>';}

Why use a button and not a div or span? to keep the code valid for "XHTML 1.0 Strict" when the webvideo tag is included in tags. This is often the case when users add a webvideo in their content pages (i also like to enable the "Force rootblock:" in TineyMCE)

Why use display:block; for the button? because otherwise it isn't possible to properly position the "button" (ex: by adding margin:0 auto 15px auto; to the forceheightclass or id)

The new parameters are:
- forceheight='1'
- forceheightclass='CLASSNAME'
- forceheightid='IDNAME'

Greetings,
Manuel

[manuel]

Oops, using a button to wrap around the embed code make the code validate but also made the video "unclickable"!

What else could we use inside of a tag? The tag of course! by positioning the "relative" and the object "absolute" they overlap each other...
Below you will find the corrected code:

Code: Select all

if ($forceheight == 1) {echo '<a '.$forceheightclass.$forceheightid.'style="width:'.$width.'px; height:'.$height.'px; display:block; position:relative;">';}
echo '<object type="application/x-shockwave-flash" '.$class.$id.'style="width:'.$width.'px; height:'.$height.'px;position:absolute; top:0; right:0;" data="'.$url.'">'."\n".'<param name="movie" value="'.$url.'" />'."\n".$fsparam.$wmode.$script.'</object>'."\n";
if ($forceheight == 1) {echo '</a>';}

Greetings,
Manuel

[bryan]

Just updated the webvideo plugin to version 1.1:
* Added support for playlists in youtube.
* Backwards compatible with CMSMS versions older than 1.9.
* Added support for absolute urls. This allows you to use pretty much any streaming service you want or create a custom widget. An example is provided in the tag documentation.

See the readme.txt for more info.

Seems like there's a lot of other plugins and modules out there now that do the same thing, or something similar. Some key elements to this one are:
* Easy to use
* Thorough documentation
* Flexible design options
* Supports a wide range of streaming services
* Generates valid xhtml
* Requires very little system resources (only 15Kb download)
* Compatible with older versions of CMSMS
* Easy to modify

[mercier]

just a quick thank you for a great plugin. it works great.

[Sepp]

Hi Bryan.

Thanks for this great plugin.

I have a question to this:
Is it possible to somehow implement a button to TinyMCE with this tag?

Sincierly

Sepp

[manuel]

You can add the code to the tinymce "Custom dropdown"

Extensions >> TinyMCE wysiwyg >> Advanced >> Custom dropdown

Greetings,
Manuel

[Sepp]

Hi Manuel.

Thanks for that tip.

Something is weird on the TinyMCE customization page. There is a <a> tag above everything else. I had to disable this tag with firebug before I was able to perform anything on the page.

[manuel]

That should definitely not be the case...
You could try uninstalling/reinstalling tineymce (backup any custom settings you made) and upgrading cmsms to 1.9.4.1 (if you haven't already).
If it's not solved, please start a dedicated forum thread describing your problem in detail.

Greetings,
Manuel