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 community meetup - Sept 29 (virtual + Melbourne)

Super excited to be presenting this Thursday the 29th of September at the Optimizely community meetup. For the full details and RSVP's see the...

Ynze | Sep 27, 2022 | Syndicated blog

Preview multiple Visitor Groups directly while browsing your Optimizely site

Visitor groups are great - it's an easy way to add personalization towards market segments to your site. But it does come with it's own set of...

Allan Thraen | Sep 26, 2022 | Syndicated blog

The Report Center is finally back in Optimizely CMS 12

With Episerver.CMS.UI 12.12.0 the Report Center is finally re-introduced in the core product.

Tomas Hensrud Gulla | Sep 26, 2022 | Syndicated blog

Dynamic Route in ASP.NET Core When MapDynamicControllerRoute Does Not Work

Background Creating one of the add-on for Optimizely I had to deal with challenge to register dynamically route for the API controller. Dynamic rou...

valdis | Sep 25, 2022 | Syndicated blog