Embedding video in Sitecore items

These days streaming video on the web is quite popular. In almost every project we do at Evident Interactive the customer wants to embed video in content items. Off course they can do that by copy-pasting the embedding code in a Sitecore field or in the rich-text editor. But that is not the most user-friendly method. I thought it would be nice if an end-user could just copy-paste the url of the page and let an custom control do the rest. So I created a custom field, webcontrol, some xsl extensions an a addition to the flashmanager. Let’s say that we want to embed this video from YouTube. I go to the content editor and paste the url in a field of the type “Video Embed”.

When I want to double check if I pasted the correct url I can click preview. A popup appears with the embedded video.

Then I can save my item and publish it to the web database. The only thing saved in Sitecore is the url to the page containing the video.

But sometimes you want to embed video in to an rich text field. For this I wrote an extension for the flashmanager. It works the same as the custom field, the only thing different is you get a preview inside the tab and the embed code will be copied to to rich-text editor value.

To show my video in the frontend of the site I need to add an custom control to my layout or sublayout. The custom control is included in the package.

You need to add a page directive to your layout or sublayout

Then you can add the custom control. You can set the height and width of the embed code. When those are left blank a default size of 240 for the height and 320 for the width will be used.

<video id="VideoEmbed1" Height="240" Width="320"></video>

And here is the result of the control

At the moment the solution works for YouTube, Vimeo and Google Video (international and dutch version). I will contribute this to the Shared Source section of Sitecore as soon as Jimmie is back from holiday and can give me access.