Try our conversational search powered by Generative AI!

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
Build a headless blog with Astro and Optimizely SaaS CMS

I’m a big fan of using the right tool for the right job. I’m also a big fan of Astro , for the right use case. Let's explore Astro to see what it's...

Jacob Pretorius | May 28, 2024

Microsoft announces Natural language to SQL

Finally, Microsoft launches "Natural language to SQL," after it has been available for several months in Optimizely CMS!

Tomas Hensrud Gulla | May 23, 2024 | Syndicated blog

Five easy ways to start personalizing your content right now

If you clicked on this article, you already know that getting the right message to the right person at the right time helps drive conversions and...

Kara Andersen | May 23, 2024

ExtendedCms.TinyMceEnhancements – serwer side webp support

Today I will introduce another small feature of TinyMceEnhancements plugin. The functionality is used to automatically detect whether a browser...

Grzegorz Wiecheć | May 22, 2024 | Syndicated blog