Adding YouTube Videos to the Sitecore Rich Text field

NOTE: This post has been updated 04-12-2012 with new iOS 5.x compatible object tags.

This post is not only about adding YouTube videos to Sitecore content. It’s actually about replacing content from the Rich Text editor on runtime using the RenderField pipeline.

Have you ever tried to add <object> tags or other content to the Sitecore Rich Text Editor?

Pasting Object HTML directly to the Rich Text Editor

Pasting Object HTML directly to the Rich Text Editor

And have you then experienced that after pasting the code, the Rich Text Editor will produce JavaScript errors:

Java Script Errors

Java Script Errors

Or have you experienced that the Rich Text Editor will remove the <object> tag, leaving the embed tag, making your HTML invalid?

Or is it simply too tricky for the end user to open then HTML and paste in HTML code directly?

There is several solutions to these problems. One of them is to allow the user to write one thing in the editor and display another on the web site. For example, if the user wants to link to a YouTube video, why not just let the user paste a link to the video in the editor. But when the page is rendered, replace the link with the embedded YouTube video player?

I know that there is JavaScript functions to do this, but I would like to create a version that will run without Javascript.

To do this, you need to create a new RenderField processor.

When the replacer is in place you can write an URL to the YouTube video:

Link to YouTube video

Link to YouTube video

And when displayed on the website, the link is replaced with an embedded player:

Displaying embedded YouTube video

Displaying embedded YouTube video

The processor is added to the RenderField pipeline in web.config:

<processor type="Sitecore.Pipelines.RenderField.SetParameters, Sitecore.Kernel" />
<!-- our processor -->
<processor type="MyCode.Pipelines.RenderField.RenderYouTubeVideo, MyDll"/>
<!-- our processor -->
<processor type="Sitecore.Pipelines.RenderField.AddBeforeAndAfterValues, Sitecore.Kernel" />
<processor type="Sitecore.Pipelines.RenderField.RenderWebEditing, Sitecore.Kernel" />

The YouTube replacer uses the HtmlAgilityPack that is shipped with Sitecore. This pack allows me to traverse the HTML as it were XML.

using System;
using System.Text;
using Sitecore.Text;

namespace Oti.DigiZuite.Renderer.Pipelines.RenderField
  public class RenderYouTubeVideo
    public void Process(RenderFieldArgs args)
      Assert.ArgumentNotNull(args, "args");
      Assert.ArgumentNotNull(args.FieldTypeKey, "args.FieldTypeKey");

      // Do not modify output if the field is not a rich text field,
      // or if the page is in page editor mode
      if (args.FieldTypeKey != "rich text" ||
          String.IsNullOrEmpty(args.FieldValue) ||

      // Load the HTML into the HtmlAgilityPack
      HtmlDocument doc = new HtmlDocument();
      doc.OptionWriteEmptyNodes = true;

      // Search for all links
      HtmlNodeCollection aTag = doc.DocumentNode.SelectNodes("//a");
      if (aTag == null || aTag.Count == 0)

      foreach (HtmlNode node in aTag)
        // Look for links to YouTube
        if (node.Attributes["href"].Value.StartsWith(""))
          // Get the video ID and create an object tag
          UrlString urlString = new UrlString(node.Attributes["href"].Value);
          string videoIdentifier = urlString.Parameters["v"];
          string youtubePlayer = RenderVideo(videoIdentifier, 640, 385);
          node.ParentNode.InnerHtml = node.ParentNode.InnerHtml.Replace(node.OuterHtml, youtubePlayer);
      // Replace the Rich Text content with the modified content
      args.Result.FirstPart = doc.DocumentNode.OuterHtml;

    private string RenderVideo(string videoIdentifier, int width, int height)
      StringBuilder sb = new StringBuilder();
      sb.Append(@"<div class=""Video"">");
      sb.AppendFormat(@"<object width=""{0}"" height=""{1}"">", width, height);
      sb.AppendFormat(@"<param name=""movie"" value=""{0}&color1=0xb1b1b1&color2=0xcfcfcf&hl=en_US&feature=player_embedded&fs=1""></param>", videoIdentifier);
      sb.Append(@"<param name=""allowFullScreen"" value=""true""></param>");
      sb.Append(@"<param name=""allowScriptAccess"" value=""always""></param>");
      sb.AppendFormat(@"<embed src=""{0}&color1=0xb1b1b1&color2=0xcfcfcf&hl=en_US&feature=player_embedded&fs=1"" type=""application/x-shockwave-flash"" allowfullscreen=""true"" allowScriptAccess=""always"" width=""{1}"" height=""{2}""></embed>", videoIdentifier, width, height);
      return sb.ToString();

This is just one example of how to allow users to add one thing and display another. In the upcomming version of DAM for Sitecore, users will, when adding a video to their editor, have an thumbnail image inside the Rich Text editor, but still have a video player on the website. This eliminates the JavaScript errors that pops up when adding <object> tags to the editor.

About briancaos

Developer at Pentia A/S since 2003. Have developed Web Applications using Sitecore Since Sitecore 4.1.
This entry was posted in c#, Sitecore 6 and tagged , , , , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s