Al Bsharah Business Minded, Technically Inclined

BlogEngine.NET Extension – YouTube Video

B

I was disappointed to see that the YouTube extension for BlogEngine was no longer available for download, so I decided to create my own.

I had recently installed Sean Blakemore’s Silverlight Extension, and since I have never coded an extension for BlogEngine I figured I’d learn from a similar application.  Thanks for the head start, Sean!  I really used the base of his code and modified it to work for YouTube videos instead.

UPDATE 01.13.2011: Version 1.3 Released.  Fixes compatibility issues with BlogEngine.NET 2.0.  Should now work just fine!

UPDATE 05.11.2010: Version 1.2 Released.  Includes heavily-requested feature to add YouTube videos to BlogEngine.NET “Pages” (as well as Blog Posts)!  Thanks to Dobin Fernandes for the updated code!  Now if we can just get him to figure out how to apply this to RSS feeds, we’ll be all set!

UPDATE 10.28.2008: Version 1.1 Released.  Instructions modified.

Version history at end of this post.

So, installation is quite easy:

  1. Take this ZIP file – YouTube Player 1.3 – BlogEngine Extension – and extract the YouTubePlayer.cs file into your /App_Code/Extensions folder within the root of your BlogEngine installation.
  2. Log into the “Extensions” portion of your admin panel, you should see the YouTubePlayer extension.
  3. Click the Edit link to change settings.  NOTE: You do not need to modify these settings if you don’t want, you can skip to step 4.
    • Width and Height are set to the default YouTube size, you can change them if you wish but I don’t believe it will change the size of the video.
    • Show Border is nice if you want to blend the video border into the color scheme of your website.  By default this is turned off (0).  Turn it on by changing the setting to “1”.
    • Primary and Secondary colors are used for the border and need to be entered in Hexidecimal value.  The example below uses 709397 for the secondary (the aqua in this site) and 000000 (black) for the primary.  You can see how it looks below.
  4. Create a new entry and add this code to your blog to insert a YouTube video:  [ youtube:YourVideoCodeGoesHere ]  (without the spaces).
    • Note that the “YourVideoCodeGoesHere” part is typically random characters and letters.  You can see them in the URL of your YouTube video.

That being said, the code entered for this is [ youtube:Ddn4MGaS3N4 ](minus the spaces)

The video looks like this:

Enjoy!

=================
VERSION HISTORY
=================

01.13.2011
Version 1.3
YouTube Player 1.3 – BlogEngine Extension

Fix: Compatibility issues with BlogEngine.NET 2.0 resolved.

——–

05.11.2010
Version 1.2
YouTube Player 1.2 – BlogEngine Extension

Change: System now allows for YouTube Videos to be posted to BlogEngine.NET “Pages” as well as just the “Posts”.  Thanks Dobin Fernandes!

——–

10.28.2008
Version 1.1
YouTube Player 1.1 – BlogEngine Extension

Change: Code used within [ youtube: ] tag is no longer the entire URL (i.e. http://www.youtube.com/v/Ddn4MGaS3N4).  On occasion, if the WYSIWYG editor set the URL as a hyperlink, the rendering of the video would fail.  Now, it’s only required that the random video code is entered (i.e. Ddn4MGaS3N4)

——–

10.25.2008
Version 1.0, first release

YouTube Player 1.0 – BlogEngine Extension

About the author

Al Bsharah

Al’s been involved in multiple San Diego startups since 1999 after leaving the Detroit auto industry as an electrical engineer. He's started two of his own companies where he's raised capital from both VCs and angels, and sold one of them to both Seismic and Return Path. He resides on the board of Startup San Diego, is a Tech Coast Angels member, and has graduated both Techstars and Founder Institute accelerator programs where he now mentors. Al is currently the Vice President of Product Strategy at Seismic and in his free time he manages to play a little beach volleyball, trade stocks, and camp with his wife, son, dog, and friends.

71 comments

  • Thanks so much for making this but I am having an issue getting it to work.

    I have it installed and it show in my exstensions tab under admin. I add this line of code

    [ youtube:http://www.youtube.com/v/9KtJPRkt3sY ]

    minus the spaces and the video does not show up? but I can tell that there is something there because I can high light a bo but no video pops up?

    PLease help thanks

    Chris

  • Hey Chris, thanks for the note!

    Did a little playing around and I think I’ve replicated your issue. It appears that if the WYSIWYG editor turns the YouTube URL (within the [youtube:] tag) into an actual hyperlink, it will mess up the rendering of the video.

    I think I have a solution in mind, but it requires a little re-write. Essentially, your new link would look like this: [youtube:9KtJPRkt3sY]

    That would eliminate the system ever converting this to a hyperlink before generating the YouTube code. Keep an eye on this thread and I’ll post an update when I get it done. Maybe tonight, but don’t count on it… <smile>

    Thanks for the heads up!
    AL

  • Ah, so you were seeing a different issue all-together. Glad to hear you’re up and running!

    I did update the code to version 1.1 (had a few minutes to kill…) <grin> This resolves the issue I found with the rendering. Instructions and download have been modified in the original post.

    Cheers…

  • great extension.
    our mktg needed to add a link to a youtube video, and I found that the "standard" extension was gone, got this working in 2 minutes.

  • This code extension is great, just the thing I was looking for. This inspires me to create my own extension.

    Thanks for the code!

    Mike

  • Works great! Thank you very much. I have one question though, how would I go about centering the video in the post? I tried using:

    <div style="text-align: center">
    [youtube:XXXXXX]
    </div>

    But it doesn’t work. I could edit the extension but I would don’t necessarily want to center all the videos posted.

    Any suggestions would be great.

  • @Simon: You’re correct. Extensions do not work in "pages"…in fact, they don’t work in RSS feeds either. They only seem to work in "posts". I believe this to be an issue with the BlogEngine.NET framework though, I’m not sure there’s a way around it. If anyone has any suggestions, I’d be open to hearing them!

  • Hi all, first sorry my english is terrible.

    But i modify de code to work with the copy and past of the youtube link like this: http://www.youtube.com/watch?v=********

    The BlogEngine.net save the post and modify de link to: <a href="http://www.youtube.com/watch?v=********">http://www.youtube.com/watch?v=********</a&gt;

    So, lets modify the code to work on it

    First, i change de Regexp @"\[youtube:.*?\]"; to @"<a .*?v=.*?>(.*?)</a>"; now i can find the link to youtube video.

    Next a change de line:

    Int32 length = "[youtube:".Length;
    string mediaFile = matches[i].Value.Substring(length, matches[i].Value.Length – length – 1);

    to

    string mediaFile = matches[i].Value.Replace("<a href=\"http://www.youtube.com/watch?v=&quot;, "");
    int indexElemente = mediaFile.IndexOf("\"");
    mediaFile = mediaFile.Substring(0, indexElemente);

    So now i only copy and past de link of the youtube video and de embed is put in my blog.

    Tks !!!!

  • Hi all, first sorry my english is terrible.

    But i modify de code to work with the copy and past of the youtube link like this: http: // www. youtube. com/ watch? v=********

    The BlogEngine.net save the post and modify de link to: $a href="http ://www. youtube.com/watch? v=********">http: //www. youtube. com/watch?v=********"$/a>

    So, lets modify the code to work on it

    First, i change de Regexp @"\[youtube:.*?\]"; to @"<a .*?v=.*?>(.*?)</a>"; now i can find the link to youtube video.

    Next a change de line:

    Int32 length = "[youtube:".Length;
    string mediaFile = matches[i].Value.Substring(length, matches[i].Value.Length – length – 1);

    to

    string mediaFile = matches[i].Value.Replace("$a href=\"http: //www.youtube. com/watch? v=", "");
    int indexElemente = mediaFile.IndexOf("\"");
    mediaFile = mediaFile.Substring(0, indexElemente);

    So now i only copy and past de link of the youtube video and de embed is put in my blog.

    Tks !!!!

    PS.: Replace $ to <

  • "I was disappointed to see that the YouTube extension for BlogEngine was no longer available for download, so I decided to create my own. "

    – A classic phrase that really shows the collaborative and community atmosphere of BlogEngine.

  • hi there,

    I cant seem to get it to work. i placed the YouTubePlayer.cs in the App_Code/Extensions folder and pasted in [ youtube:Ddn4MGaS3N4 ] into a post, without the whitespaces.

    it just doesnt seem to do anything. can’t figure out what to do? i’ve looked at the source and cant see any reason why it won’t work and i’ve tried re-installing.

    any help would be appreciated.

    Thanks
    Eric

  • Hi Eric,

    If you’ve followed the steps above, I’m not sure what could be wrong. Does it even show up in the Extensions Admin screen? Are there valid values in the editor portion?

    It might be worthwhile to remove the extension, reload the site, and try again.

    AL

  • This is really weird; I must be doing something wrong. I’ve tried both the YouTube and the Vimeo extension, and all I see is the text (even when adding to posts).

    I removed them both, and reinstalled to no avail. Could it be something with my BE installation since it works for everyone else?

    Thanks for doing this.

  • Ok, so for any of you with a similar issue as Nebbercracker…I ran into the problem the other night as I restored from a backup. This is what I did to resolve it:

    1) Stop IIS (confirmed this is required)
    2) Right click on the root of your blog -> Properties
    3) Uncheck "Read Only"
    4) Apply to all folders and sub-folders
    5) Restart IIS
    6) Voila…(for me, anyway)

    Let me know how it goes!

  • If you do no like to have related videos shows right after playing the youtube video just add rel=0 like below :

    <param name=""movie"" value=""{7}{1}&rel=0&fs=1&border={4}&color1=0x{5}&color2=0x{6}""></param>

    Thanks

  • Agreed, Bill. It’s a core BlogEngine.NET "problem". I’ve been trying to see if anyone knows how to get an extension to apply to "pages" for a while, but have yet to find any modifications to BE.NET that would allow for this.

    If anyone knows of any, please share!

  • Thank you for the extension. I downloaded yours and downloaded the one from BE.net v1.6 and then combined then all to make my own extension that allows the feed to validate and uses the you tube privacy option. Once I get my website more fleshed out, I’ll zip the new extension and upload it to my site for anyone who is interested. I still have to do the same for widgets from other sites. In the meantime, please check out my brand new site as our government is wasting millions of our tax dollars to roundup (and kill in the process) and maintain our wild horses.

  • I wish I had found this post a week ago. I’m in the process of the content of some blogs to other blog software (wp) so I could have access to this feature. I just tried it out on another blog and it works great. Thank you. Unfortunately I need something to work in pages too. I noticed in the reply to comments you have said you are looking into it, have you had any luck?

  • Dobin! Thank-you! This is one of the most heavily requested (including by me) features…I’m very thankful you figure it out! Any chance you know how to get RSS feeds to include the code as well? That would make me (and many others) incredibly happy.

    Cheers, and thanks again!

  • Great extension! Thanks much. You may want to consider adding a param for wmode="opaque" to prevent other site elements from going underneath the youtube vids. It only happened to me when i had a video at the bottom of posts, as i have an addthis button and it would just pop under the video on mouseover.

  • Hey folks,

    If someone wants to try adding this to the top of the .cs page in the Extensions folder:

    using BlogEngine.Core.Web.Extensions;

    I won’t be able to test this for a few days, but could be a quick fix (based on looking at the docs on the BE.NET site).

    Please let me know! Thanks.
    AL

  • sweet! you’re a talented guy to be able to code this extension. i wish i was able to do that. I appreciate you giving this away – thank you!

  • Hey Al Bsharah,

    I’ve tried the Extension with BlogEngine 2.0 and it works on the Post List (where Posts previewed). If you click the "more" link to go in the detailed Post, the generated html for the youtube object seems to be broken. I’ve debugged your Extension and something strange is goin on. In the Post list your mediaFile var has the value "vFjWOrjB0So" (normal behavior) and in the detailed Post the value is "<span style=\"font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #000000; line-height: normal;\">vFjWOrjB0So</span>" which brokes the regex replacement.

  • Hey Doc, thanks for the note.

    My best guess is that you might have copied the URL code from a web page, and pasted it into the editor. Unfortunately (in this case), the editor will typically accept a lot of the HTML from the original site. It’s best to paste it into something that doesn’t accept formatting (i.e. Notepad or the Address Bar)…and then copy that "clean" text into the editor.

    Cheers,
    AL

  • Awesome! You’re right. Its a copy & paste Problem, i’ve crosschecked the data in the Database. Thank you for your help and for this nice Plugin 🙂

    greets, doc

  • Hey Al, I published your extensions on dnbegallery.org, hope you don’t mind. If you want take ownership just create an account and I’ll set you up as an owner.

  • Great extension! Thanks much. You may want to consider adding a param for wmode="opaque" to prevent other site elements from going underneath the youtube vids. It only happened to me when i had a video at the bottom of posts, as i have an addthis button and it would just pop under the video on mouseover.

  • I think that is one of the so much important info for me. And i’m glad reading your article. But want to observation on some common things, The website taste is great, the articles is in point of fact great : D.

  • The extension is awesome. What a great work for this. 🙂 I'm thinking if there is a way that the video embeded can be shown in widgets portion? or can we make this as widgets? I really need to display videos on sidebar. I hope you can give a brief idea on my problem. Thank you so much!

  • Very useful extension. thanks!
    I have a suggested modification to allow automatic protocol (http or https) selection in the scenario where your blog is using ssl. Instead of the line:
    BaseURL = "http://www.youtube.com/v/&quot;;.
    change it to.
    BaseURL = "//www.youtube.com/v/";.

    Regards,
    Steve

By Al Bsharah
Al Bsharah Business Minded, Technically Inclined