Try our conversational search powered by Generative AI!

Jeff Wallace
Aug 24, 2012
(1 votes)

Alloy Technologies Video Page Type

Based on EPiServer CMS 6 R2 and the Alloy Technologies Templates

Recently I was working with a customer who wanted a nice Video-based Page Type.  In their own search they came across some of the video pages on for a few of our Add-ons.  The customer informed me that this was similar to what they were looking for.  Perfect!  Following my typical fashion I figured I could hi-jack most of someone else’s good code and make a useful Page Type.  You know how I love to do that!

I reached out to the EPiServer web team to see if I could take a look at the code.  Of course, they were all sleeping, a few beers closer to sleeping, shoveling snow (it was July in Sweden after all),…or something like that.  I viewed the page source to borrow/steal as much as I could and got my basic page working.  Then I made some additions to suit my needs.  Sebastian Lundh was kind enough to hook me up with the real code the next day so I could review my efforts.  Aren’t we just a happy helpful sharing bunch of colleagues?  Of course!

Anyway, with this I was able to clean up my code slightly and probably make a mess of some other areas. The actual code was written by Gregor Oloffson but you can assume anything you don’t like was authored by me! Winking smile

Enough babbling already!  Here’s the result…

This is a Video Page Type designed specifically for the Alloy Technologies templates.  This should be great for demonstrations purposes.  If you want to add it to another site I suggest you install into Alloy and manually move/modify the relevant bits of code. 

The Video Page Type was intended to support either:

  • YouTube videos
    • In which case the thumbnail will be automatically generated for you
  • SWF videos added to the EPiServer File Manager locally
    • In which case you should upload a image to use for the thumbnail

YouTube Video Example

Adding content in Edit Mode



The resulting page



The result when clicking the video thumbnail on the right


And sure, I know what you’re all wondering…is that me in the video on the board?  It is true that I was able to experience the wonder of Åre last January but alas this is not me.  They must have lost that intense video demonstrating my expert skillset and settled for this clip.


SWF Video Example

Adding content in Edit Mode (notice I set the thumbnail Property)



The resulting page



The result when clicking the video thumbnail on the right



This is not intended to be the “end all” Video Page Type and there’s plenty of room for improvements.  However, this should be a good starting point for your Video Page needs and great for demos in Alloy Technologies as is!

Special thanks to Sebastian Lundh for helping me out and Gregor Oloffson for authoring the original code!


How do you get it and set it up?

You can download the Nuget package here and install manually: Download.

The Nuget package will put everything needed into your project so you simply need to compile:

  • Video Page Template – the template code for the Page Type
  • Video Master Page – this is essentially a copy of the original Alloy Technologies default Master Page with the fancybox javascript added.  I didn’t want to mess with others master pages but you can of course tweak this how you like
  • fancybox scripts and images – 3rd party tool used for the video.  Be sure to review their licensing agreements, especially if you plan to use this on a commercial site

After that the Page Type needs to be imported to EPiServer.  If you added this to your project via the Nuget package you can find the import file in your sites root directory in a folder called “install”.  To import…

  1. Log in to EPiServer
  2. Navigate to Admin Mode
  3. Select the Admin tab
  4. Scroll down to Tools and select “Import Data”
    1. image
  5. In the right-hand window select the “Browse” button
  6. Select the import file (.episerverdata file) from your sites root directory in a folder called “install”
    1. image
  7. Select the “Begin Import” button
  8. If all goes well the resulting window should indicate 1 Page Type was successfully imported
    1. image

Test it out and enjoy!

Please note, this is intended as a starting point for you to customize for your project needs. The code is provided “as is” without warranty or guarantee of operation. Use at your own risk. Good luck and enjoy!

Aug 24, 2012


Oct 5, 2012 02:18 PM

Three or four different kinds of awesome!

Please login to comment.
Latest blogs
Optimizely and the never-ending story of the missing globe!

I've worked with Optimizely CMS for 14 years, and there are two things I'm obsessed with: Link validation and the globe that keeps disappearing on...

Tomas Hensrud Gulla | Apr 18, 2024 | Syndicated blog

Visitor Groups Usage Report For Optimizely CMS 12

This add-on offers detailed information on how visitor groups are used and how effective they are within Optimizely CMS. Editors can monitor and...

Adnan Zameer | Apr 18, 2024 | Syndicated blog

Azure AI Language – Abstractive Summarisation in Optimizely CMS

In this article, I show how the abstraction summarisation feature provided by the Azure AI Language platform, can be used within Optimizely CMS to...

Anil Patel | Apr 18, 2024 | Syndicated blog

Fix your Search & Navigation (Find) indexing job, please

Once upon a time, a colleague asked me to look into a customer database with weird spikes in database log usage. (You might start to wonder why I a...

Quan Mai | Apr 17, 2024 | Syndicated blog