Display youtube videos in episerver using dynamic content

I just can’t keep away from developing dynamic content modules these days. Since I can’t stay away from youtube either I come up with the idea to use youtube as a video provider in episerver (I bet no one had thought of that before). My plan was to create an episerver plugin where you could upload videos and then later show these videos on selected pages using dynamic content. Since crud is a bit boring I started with the latter, but hopefully you’ll soon se a follow-up post on how to create the upload video interface as well.

The dynamic content edit interface looks like this:

You can setup different video listings, for example “our product videos”, “videos with a specific keyword” or as in the example above “all videos from a user with  good music taste”. The editor can preview the videos and the module also keeps track of in which listing the video appears to be able to have that video preselected when editing the dynamic content instance.

The implementation is once again quite simple. I’m only using the public youtube atom feeds which are parsed on server side. This is pretty much the same functionality as in my twitter module, but you will notice that although most sites support rss and/or atom they use different schemas for representing the same information, which is a shame.

The video preview is using swfobject and all user interaction is done with jquery. The video list dropdown is using auto postback which I usually don’t recommend since it will cause issues for users navigating with keyboard only. The reason I did this this time was to be able to point that out :)

Dynamic content really is a nice feature, but, as always there’s room for improvement. What I like to see in the next version is:

• Preview in rich text editor
  • This could probably be solved in a similar way as different rendering of properties is handled in episerver today. In my case a image thumbnail would do the trick.
• The possibility to customize the edit interface
• If you try out this example you’ll probably see what I mean. For example the default window size and how postback is handled are stuff I’d like to be able to control myself.

Lastly, here’s what you need to know about the included files:

• DynamicTube.cs
• Handles the dynamic content state and renders the selected video to the end user
• DynamicTube.css
• Styling that you hopefully can improve
• DynamicTube.js
• Sets up the event handlers for the video preview
• DynamicTubeEdit.ascx
• Renders the video selections and video listing
• DynamicTubeEdit.ascx.cs
• Fetches feed and keeps track of current selection if it is a re-edit. This is where you should change the hard coded selection listings (urls to youtube atom).
• DynamicTubeView.ascx
• Renders the selected video to the end user

Don’t forget to include jquery (the default path is set to /Scripts/jquery-1.3.2.js).

Download the complete source code for the youtube episerver dynamic content module.