Nibble

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.

image

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 [ &lt;!ENTITY nbsp “&#x00A0;”> ]>
<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)}&amp;hl=en”></param>
<param name=”wmode” value=”transparent”></param>
<embed src=”http://www.youtube.com/v/{YouTube:getVideoId($url)}&amp;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:

image

19 Comments so far

  1. Petr Snobelt on July 3rd, 2008

    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.

  2. Soeren Sprogoe on July 3rd, 2008

    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.

  3. Tim Geyssens on July 3rd, 2008

    Thanks for the tips, damn I need to get this syntaxhighliting fixed

  4. Brian Kristensen on July 3rd, 2008

    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?

  5. Tim Geyssens on July 3rd, 2008

    Sure ClassLibrary is good, as long as you have a dll

  6. Scott on September 17th, 2008

    How did you get the popup window to open the youtube insert dialog?

  7. Scott on September 25th, 2008

    I just get the macro code embedded in the page. What have I done wrong?

  8. Scott on September 25th, 2008

    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.

  9. Scott on September 25th, 2008

    This works in XSLT:

    Where bodyText is an RTE datatype containing embedded macros and content.

  10. Greg on October 18th, 2008

    Awesome - thanks for this… it’s just what i needed :)

  11. Gabriele on February 9th, 2009

    if i want to stream a wmv file how can i change this script?

  12. Gabriele on February 13th, 2009

    some news?

  13. Tim Geyssens on February 13th, 2009

    @Gabriele, don’t think you’ll be able to change this script to stream a wmv file.

  14. gabriele on February 16th, 2009

    Thanks very much…

  15. Tim Geyssens on February 16th, 2009
  16. no credit check loans information on November 25th, 2010

    Good Job, http://www.lovespeaks.org/profile/NOCREDITCHECKLOANS no credit check loans, uldv,

  17. student debt consolidation loans free on November 25th, 2010

    Thank You, http://studentdebtconsolidationloans.webstarts.com First student debt consolidation loans, 6529,

  18. need 5000 loan overnight on November 25th, 2010

    Real, http://www.lovespeaks.org/profile/NEED5000LOANOVERNIGHT need 5000 loan overnight, 60097,

  19. Best mortgage rates predictions on November 25th, 2010

    Is it so important?, http://www.lovespeaks.org/profile/MORTGAGERATESPREDICTIONS mortgage rates predictions, 8-O,

Leave a Reply