all things Sitecore related

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”.

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

Embedding video in Sitecore items

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.

Embedding video in Sitecore items

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


<%@ Register TagPrefix="video" Namespace="Sitecore.SharedSource.VideoEmbed" Assembly="VideoEmbed" %>

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:EmbedVideo id="VideoEmbed1" runat="server" Field="Video" Height="240" Width="320"></video:EmbedVideo>

And here is the result of the control

Embedding video in Sitecore items

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.

Tags: , , ,

About the Author

About the Author: Mark van Aalst is a Solution Architect for Sitecore Netherlands. Prior to working for Sitecore he has worked with the Sitecore CMS for more than 6 years and was a Sitecore MVP. Mark is also the initiator of the populair Sitecore Shared Source WeBlog module which he develops together with Nick Wesselman and Alistair Deneys. You can follow Mark on Twitter @markvanaalst or Google+ .

Subscribe

If you enjoyed this article, subscribe now to receive more just like it.

There Are 3 Brilliant Comments

Trackback URL | Comments RSS Feed

  1. Valerii says:

    Hi guys! I tried to use your component for embeding video. I created a field with type “EmbedVideo” in template manager and then created an Item, based on this template. In the item I see only a label for the field, but not the field. Label “preview” is absent as well. Don’t you know, what can be wrong there?

  2. tatek says:

    Nice! tnx for the tip.

  3. tatek says:

    the images are missing, though

Post a Comment

Your email address will not be published. Required fields are marked *

Top