Dec 1, 2011
(2 votes)

Creating a Dynamic Content plugin for Vimeo and Youtube using Regex

You have probably made a dynamic content plugin before in your projects and using either youtube or another service. But in this case I am using both vimeo and youtube. So the big thing about this is not creating a dynamic content plugin for video but for two using a nice regex. When I got this in my project I thougt it was easy and it should be but the tricky part was greating a nice Regex that could decide if it was a video from youtube or vimeo.


So what have i done.. well as I am not a real geek as Ted Nyberg,, so I choose the simple way in life and use the EPiServer VS integration stuff. Ler

Rightclick on a folder i VS and add a new EPiServer Dynamic Content like this:


When that is done you have a nice usercontrol for dynamic content. Looking something like this in front-end:

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="dcPlugin.ascx.cs" Inherits="Svanemerket.Templates.Main.Units.Dynamic.dcPlugin" %>
    Add markup for rendering dcPlugin.

and like this in back-end:

[DynamicContentPlugIn(DisplayName = "dcPlugin Dynamic Content", ViewUrl = "~/Templates/Main/Units/Dynamic/dcPlugin.ascx")]
    public partial class dcPlugin : EPiServer.UserControlBase
        #region Editable Properties
        // Add your editable properties as normal .Net properties.
        // Supported property types are string, int, bool, 
        // EPiServer.Core.PageReference and any class
        // inheriting EPiServer.Core.PropertyData.
        protected void Page_Load(object sender, EventArgs e)

so now it is time to add our custom code.

Add properties on the Dynamic Content settings

In this plugin I only need one property and that is the string were I enter the url to the video.

public string Videourl { get; set; }

The Regex

To handle to diffrent videorurl we need two diffrent Regex. One for Vimeo and one for Youtube.

public static readonly Regex VimeoVideoRegex = new Regex(@"vimeo\.com/(?:.*#|.*/videos/)?([0-9]+)", RegexOptions.IgnoreCase | RegexOptions.Multiline);
     public static readonly Regex YoutubeVideoRegex = new Regex(@"youtu(?:\.be|be\.com)/(?:.*v(?:/|=)|(?:.*/)?)([a-zA-Z0-9-_]+)", RegexOptions.IgnoreCase);

These regex will handle, as far as i can tell, all diffrent links at the moment Ler They will be used too decide if we should use the iframe for youtube or for vimeo.

Creating the Player()

Here I create diffrent iframes depending on the success of the Regex.

public string GetPlayer()
    Match youtubeMatch = YoutubeVideoRegex.Match(Videourl);
    Match vimeoMatch = VimeoVideoRegex.Match(Videourl);
    string id;
    const string vimeoframe = "<iframe width=\"450\" height=\"315\" src=\"{0}?title=0&amp;byline=0&amp;portrait=0&amp\" frameborder=\"0\" allowfullscreen></iframe>";
    const string youtubeframe = "<iframe width=\"450\" height=\"315\" src=\"{0}\" frameborder=\"0\" allowfullscreen></iframe>";
    if (youtubeMatch.Success)
        id = youtubeMatch.Groups[1].Value;
        return string.Format(youtubeframe, id);
    if (vimeoMatch.Success)
        id = vimeoMatch.Groups[1].Value;
        return string.Format(vimeoframe, id);
    return string.Empty;

Now lets update the front-end so that we actually will render the player.

    <% = GetPlayer() %>

Finally edit a page and insert your new dynaminc content. Copy/paste the url from either vimeo or youtube into the VideoUrl and the result will look something like this..


Thats it! Hopefully this will help someone… Ler

Dec 01, 2011


Frederik Vig
Frederik Vig Dec 2, 2011 05:59 PM

You also have the oEmbed plugin ( that supports YouTube and Vimeo, and 220+ other providers. Dynamic content, custom property and server control that you can use :).

Eric Dec 5, 2011 01:30 PM

yes i know but this is so simple and have no need for 220 other providers.. and with this it is easy to fix bugs because it is so limited. :)

Please login to comment.
Latest blogs
Optimizely SendGrid SMTP host is deprecated

SendGrid is a services for sending email that is included in Optimizely DXP. Previously was the recommended SMTP server to use,...

Tomas Hensrud Gulla | Dec 4, 2022 | Syndicated blog

Hosting Optimizely CMS 12 on Docker Engine

Since Optimizely CMS can now be deployed as a Docker container, here is a demonstration of building, running and scaling an Optimizely CMS 12 site ...

Stefan Holm Olsen | Dec 4, 2022 | Syndicated blog

How to use CacheTagHelper with content areas in Optimizely CMS 12

I might be going out on a limb here - if you have a better solution, feel very free to share it!  Upgrading your Optimizely web application from .N...

Andreas J | Dec 2, 2022

The 1001st Piece in your 1000 Piece Puzzle: .NET Default Interface Functions

I was recently working with a client who wanted a reasonably large subsystem added to Optimizely that would add automated management to their...

Greg J | Nov 28, 2022 | Syndicated blog