Eric
Dec 1, 2011
  6544
(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, http://tedgustaf.com/en/blog/2011/4/creating-dynamic-content-in-episerver-cms-6-r2/, 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:

image

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" %>
<div>
    Add markup for rendering dcPlugin.
</div>

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.
 
        #endregion
 
        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=\"http://player.vimeo.com/video/{0}?title=0&amp;byline=0&amp;portrait=0&amp\" frameborder=\"0\" allowfullscreen></iframe>";
 
    const string youtubeframe = "<iframe width=\"450\" height=\"315\" src=\"http://www.youtube.com/embed/{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.

<div>
    <% = GetPlayer() %>
</div>

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..

image

Thats it! Hopefully this will help someone… Ler

Dec 01, 2011

Comments

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

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

Eric
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
PageCriteriaQueryService builder with Blazor and MudBlazor

This might be a stupid idea but my new years resolution was to do / test more stuff so here goes. This razor component allows users to build and...

Per Nergård (MVP) | Feb 10, 2025

Enhancing Optimizely CMS Multi-Site Architecture with Structured Isolation

The main challenge of building an Optimizely CMS website is to think about its multi site capabilities up front. Making adjustment after the fact c...

David Drouin-Prince | Feb 9, 2025 | Syndicated blog

How to: set access right to folders

Today I stumped upon this question Solution for Handling File Upload Permissions in Episerver CMS 12, and there is a simple solution for that Using...

Quan Mai | Feb 7, 2025 | Syndicated blog

Poking around in the new Visual Builder and the SaaS CMS

Early findings from using a SaaS CMS instance and the new Visual Builder grids.

Johan Kronberg | Feb 7, 2025 | Syndicated blog

Be careful with your (order) notes

This happened a quite ago but only now I have had time to write about it. Once upon a time, I was asked to look into a customer database (in a big...

Quan Mai | Feb 5, 2025 | Syndicated blog

Imagevault download picker

This open source extension enables you to download images as ImageData with ContentReference from the ImageVault picker. It serves as an alternativ...

Luc Gosso (MVP) | Feb 4, 2025 | Syndicated blog