10
Dec
8
Embedding YouTube or Vimeo inside your Text-Content using a custom 'TextParser'
Embedded videos from platforms like YouTube or Vimeo are very common nowadays. To embed such a video in the SilverStripe CMS, you would have to enter the HTML-Code directly in the HTML-Source of the TinyMCE Editor.
This is a cumbersome and error prone process and may mess with your layout. Wouldn't it be nice if you could type: $YouTube(<videoId>) anywhere in your text and then automatically get the video embedded there?
This snippet makes use of a custom TextParser to achieve that goal.
The VideoParser
Save the following code in a file named mysite/code/parsers/VideoParser.php
This class parses your text upon request and adds the capability to embed Vimeo or YouTube videos with the use of a simple variable.
Usage
To make use of the new parser, you have to invoke it on your content. This can be achieved by writing:
in your Template (instead of just $Content).
After you did so, you can make use of the new functionality. Log in to the CMS and enter the following in your Content-Area: $YouTube(oHg5SJYRHA0,500,400)
When you visit the page, you should see the YouTube Video with ID oHg5SJYRHA0 and a dimension of 500x400 pixels (you can also skip the dimensions, they will default to 400x300 pixels).
The same works for Vimeo videos. This code: $Vimeo(2619976) will embed the video at http://vimeo.com/2619976. You're free to specify width and height as second and third parameters.
Known issues
Somehow, the parsing breaks the Login page, so if you plan to use the parser for all pages (by putting $Content.Parse(VideoParser) in the Page.ss template), then you should create a custom template for the login page (Security_login.ss) and not use the parser there.
Custom replacements
You can register custom replacement hooks, by registering new handlers in mysite/_config.php
Your Page class would need a static method with a signature like myReplacer(arg1, arg2, arg3,...,argN) and could then be invoked by writing: $MyHook(arg1, arg2, arg3,...,argN) in your content area! So this class could in fact be used for much more than just embedding videos.
About the Author
Name: Roman Schmid
Website: http://bummzack.ch
Graphic Designer and Software Developer. Also known as 'banal'
Comments (8)
-
Great article and bit of code, I love it!
One question though, say I wanted to dynamically create a list containing the videoID, how could I parse it?Posted by Peter Broom, 07/06/2010 7:20am (2 months ago)
-
Hey,
very cool stuff ....
But when using other modules like 'userforms' the parsers breaks these pages, too....
But rendering these pages with other templates where the parser is not used - everything works fine againPosted by Robert, 28/04/2010 12:15pm (3 months ago)
-
Thanks for all your replies so far.
Using the capabilities of TinyMCE is a viable option too.
I usually prefer to strip out a lot of the available TinyMCE buttons, to unclutter the interface. It also helps to keep the site design consistent. With a TextParser, you could easily restrict videos to a given size, so that they won't destroy your website layout.
It's also a nice and portable solution and the functionality can be restricted to page-types.Posted by banal, 15/12/2009 12:49am (8 months ago)
-
Yeah I was in the same situation last week with one of my clients so I went digging.
Thanks for sharing how to make parsers, the more of the SS-secrets that get out in the open the better!Posted by Marcus, 14/12/2009 5:27am (8 months ago)
-
Marcus thanks for sharing those snippets. Less than two weeks ago I had created a step by step guide for a client of how to add vimeo by finding the File Video Source in the embed code...your solution here makes that all mute!
CheersPosted by Silverstriper, 11/12/2009 10:13am (8 months ago)
-
You can use this for facebook videos
// Facebook
if ( v.match(/^http:\/\/(?:www\.){0,1}facebook\.com\//) ) {
var video = v.match(/\?v=(\d+)/)[1];
f.width.value = '320';
f.height.value = '240';
f.src.value = 'http://www.facebook.com/v/' + video;
return 'flash';
}
Like the one for Vimeo just put this in the getType function on line 302 after the special cases for Youtube and Google video.
I'm not sure if this works for all facebook videos, it seems like the URL can vary quite alot but it's worked witht he ones I've tried.Posted by Marcus, 11/12/2009 3:46am (8 months ago)
-
I agree wholeheartedly with previous poster, great tutorial and also thank you for your work in the forums.
I had no idea that you could write custom text parsers for the editor so I bet this will come in real handy sooner or later.
Like Silverstriper I've activated the media plugin for video embedding.
However if you want to embed Vimeo videos with TinyMCE you have to edit media.js in the tinymce plugins/media folder and add this to function getType(v) (line 302):
// Vimeo
if ( v.match(/^http:\/\/(?:www\.){0,1}vimeo\.com\/(\d+)$/) ) {
f.width.value = '400';
f.height.value = '321';
f.src.value = 'http://vimeo.com/moogaloop.swf?clip_id=' + v.match(/^http:\/\/(?:www\.){0,1}vimeo\.com\/(\d+)$/)[1];
return 'flash';
}
Just put this after the Google video case and the video embedder will recognize Vimeo videos.Posted by Marcus, 11/12/2009 3:17am (8 months ago)
-
First off, Banal thanks for the article and also your great work on the Silverstripe forums.
In most cases for embedding YouTube or Vimeo why not just use the embed media option provided with TinyMCE? I saw some activity on the SS boards in relation to this. I am just wondering are there known issues with the TinyMCE embed media option?
You can configure TinyMce to add the media option by adding the following to the config file in the mysite directory.
//Config TinyMCE to Display the Media Embed Option
HtmlEditorConfig::get('cms')->enablePlugins('../jsparty/tiny_mce2/plugins/media'); // enables plugin
HtmlEditorConfig::get('cms')->insertButtonsAfter('charmap', 'media'); // positions pluginPosted by Silverstriper, 10/12/2009 9:51am (8 months ago)
RSS feed for comments on this page RSS feed for all comments