Creating a youtube macro for umbraco (with xslt extension)
I got this request from Bernie.
He wanted a way to insert youtube videos into the richtexteditor by only supplying the link to the video (like http://www.youtube.com/watch?v=fruHQhNe-UM)
When inserting the macro you would get this screen, only asking for the link.
After hitting ok it will insert the embed code and the video will be visible on the page.
I’ll go through the different steps I did to develop this macro.
First take a look at the embed code supplied by youtube.
<object width=”425″ height=”344″>
<param name=”movie” value=”http://www.youtube.com/v/fruHQhNe-UM&hl=en&fs=1″></param>
<param name=”allowFullScreen” value=”true”></param>
<embed src=”http://www.youtube.com/v/fruHQhNe-UM&hl=en&fs=1″
type=”application/x-shockwave-flash” allowfullscreen=”true” width=”425″ height=”344″>
</embed>
</object>
The src attibute of the embed tag will contain the location of the video. When you compare this to the url
url: http://www.youtube.com/watch?v=fruHQhNe-UM
src: http://www.youtube.com/v/fruHQhNe-UM&hl=en&fs=1
You’ll notice that the important part is the video id. So we will need to get the video id out of the url and insert this into the src attribute of the embed code.
I did this by creating an xslt extension ( you can probably do this without the extension but this was the fastes way for me).
So I made a youtube class
public class YouTube
{
public static string getVideoId(string url)
{
Regex testYouTube = new Regex(@”(\?v=)(\w[\w|-]*)”);
foreach (Match tempMatch in testYouTube.Matches(url))
{
return(tempMatch.Value.Substring(3, tempMatch.Value.Length - 3));
}
return “”;
}
}
And hooked this up in umbraco so I could use it as an xslt extension ( you do this by exposing your class in the \config\xsltExtensions.config file ).
With that in place it’s time to create the xslt file ( with macro )
<?xml version=”1.0″ encoding=”UTF-8″?>
<!DOCTYPE xsl:Stylesheet [ <!ENTITY nbsp “ ”> ]>
<xsl:stylesheet
version=”1.0″
xmlns:xsl=”http://www.w3.org/1999/XSL/Transform”
xmlns:msxml=”urn:schemas-microsoft-com:xslt”
xmlns:YouTube=”urn:YouTube”
xmlns:umbraco.library=”urn:umbraco.library”
exclude-result-prefixes=”msxml umbraco.library YouTube”>
<xsl:output method=”xml” omit-xml-declaration=”yes”/>
<xsl:param name=”currentPage”/>
<xsl:variable name=”url” select=”//YoutubeUrl”/>
<xsl:template match=”/”>
<object width=”425″ height=”355″>
<param name=”movie” value=”http://www.youtube.com/v/{YouTube:getVideoId($url)}&hl=en”></param>
<param name=”wmode” value=”transparent”></param>
<embed src=”http://www.youtube.com/v/{YouTube:getVideoId($url)}&hl=en” type=”application/x-shockwave-flash” wmode=”transparent” width=”425″ height=”355″></embed>
</object>
</xsl:template>
</xsl:stylesheet>
This will return the embed code and get the video id from the url (wich is a parameter of the macro ) by calling the xslt extension.
Macro parameters look like this:
Hi,
You may not creating extension when you only need use basic c# function.
You can use C# directly in XSLT. http://www.umbraco.org/documentation/books/extending-xslt-with-c-or-javascript/extending-using-c-sharp
Then you can have your config files unmodified.
The way I solved this very common problem was to make a simple “HTML snippet” macro.
It takes a multiple textline parameter where you can enter any kind of HTML (fx. the embed/snippet HTML from a YouTube video), and then the XSLT outputs this without performing any kind of transformation. And remember also to not render the macro within the WYSIWYG editor.
Thanks for the tips, damn I need to get this syntaxhighliting fixed
Hi, i would like to embed a C# class for another project i’m doing, but i’m new to ASP.net but not to C#. What type of project do you create the class in, as a ClassLibrary or as webservice or what ever?
Sure ClassLibrary is good, as long as you have a dll
How did you get the popup window to open the youtube insert dialog?
I just get the macro code embedded in the page. What have I done wrong?
It seems what I’ve done wrong is use XSLT to pass out my RTE value. What a major hurdle. I don’t enjoy the differences between passing a value in XSLT and “getting an item” in a template.
This works in XSLT:
Where bodyText is an RTE datatype containing embedded macros and content.
Awesome - thanks for this… it’s just what i needed
if i want to stream a wmv file how can i change this script?
some news?
@Gabriele, don’t think you’ll be able to change this script to stream a wmv file.
Thanks very much…
@Gabriele, take a look at http://www.longtailvideo.com/players/jw-wmv-player/