BlogEngine.NET Extension

BlogEngine.NET Extension - YouTube Video

Saturday, October 25, 2008

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:

Take this ZIP file - YouTubePlayer-1-3.zip (1.46 kb) - and extract the YouTubePlayer.cs file into your /App_Code/Extensions folder within the root of your BlogEngine installation.
Log into the "Extensions" portion of your admin panel, you should see the YouTubePlayer extension.
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.
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
YouTubePlayer-1-3.zip (1.46 kb)

Fix: Compatibility issues with BlogEngine.NET 2.0 resolved.

--------

05.11.2010
Version 1.2

YouTubePlayer-1-2.zip (1.45 kb)

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
YouTubePlayer-1-1.zip (1.39 kb)

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
YouTubePlayer.zip (1.36 kb)

Tags: blogengine, youtube, extension

Filed Under: Development

Chris said:

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

# 10/28/2008 8:57:02 PM

Al Bsharah said:

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

# 10/28/2008 9:35:16 PM

Well I got it to work ! had to change the write permission on the FTP side. Thanks SO SO much for making this exstension. You rock !

Chris
www.ourfitnessjourney.com

# 10/28/2008 9:40:43 PM

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

# 10/28/2008 10:09:33 PM

Donald said:

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.

# 11/4/2008 9:36:30 AM

Glad to hear it's working for you, Donald!

# 11/5/2008 5:08:41 PM

Mike H said:

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

# 11/9/2008 1:49:44 PM

Keith Melton said:

Thanks for the extension. I've been needing this one!
Works like a charm.

# 12/8/2008 6:23:37 PM

Mike and Keith, happy to hear it's being put to good use!

Cheers...

# 12/9/2008 1:13:43 PM

Ken said:

Works for me, too!

I was getting tired of that GUI editor gobbling up my YouTube links.

# 1/8/2009 7:19:22 PM

CebuHeart said:

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.

# 1/11/2009 8:41:07 PM

@Ken: Glad to hear it!

@CebuHeart: Hmmm...I just tried your DIV above and it seems to center just fine for me...? Were you able to get it working?

# 1/11/2009 9:13:34 PM

It worked on IE but not Firefox. I ended up using:

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

to get it to work on all the other browsers.

# 1/11/2009 10:06:32 PM

Firoz Ozman said:

Thanks bro for this one. This saved a lot of my work.
Lemme know if you come up with any new extensions.

Thanks

# 3/11/2009 6:43:23 PM

Lee mour said:

Hi,

great job, unfortunately not work for me...
just added this code [youtubedn4MGaS3N4] in my blog, and It does nothing!!

indojerman.org/.../Learn-Indonesian.aspx

Any idea?

# 3/14/2009 9:49:25 AM

mmhh....just reinstall ..and suddenly it works....thks

# 3/15/2009 5:51:27 PM

@Firoz - Glad ya like it! I do have another extension for Vimeo, very similar functionality. You can find it here:
al.bsharah.com/.../...T-Extension-Vimeo-Video.aspx

@Lee - Ha, sometimes it just takes a little kick... Cheers!

# 3/18/2009 8:04:51 PM

Patrick said:

THANK YOU!!!!

Works Great!

# 4/11/2009 6:51:44 AM

@Patrick: Glad to hear it! Cheers...

# 4/17/2009 9:07:23 PM

Simon said:

The extension does not work for pages which is where i need it but it does work for entries.

# 4/19/2009 11:08:01 PM

@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!

# 4/20/2009 8:02:13 AM

Eduardo said:

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

# 5/19/2009 6:59:40 AM

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 <

# 5/19/2009 7:04:35 AM

Autocratic Leadership said:

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

# 5/27/2009 3:00:22 AM

MTR Investors Group said:

AWESOME! Thanks!!!

# 8/4/2009 2:12:22 PM

Michael said:

Awesome plugin, thanks for creating this!

# 8/7/2009 11:51:58 AM

eric mooney said:

hi there,

I cant seem to get it to work. i placed the YouTubePlayer.cs in the App_Code/Extensions folder and pasted in [ youtubedn4MGaS3N4 ] 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

# 8/21/2009 6:43:51 AM

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

# 8/21/2009 7:33:43 AM

BTW, I user above in the comments (Lee) had the same issue and a reinstall fixed it for him.

# 8/21/2009 7:35:15 AM

Nebbercracker said:

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.

# 11/11/2009 10:44:47 AM

Hey Nebbercracker, I just replied to your other similar post here:
al.bsharah.com/.../...T-Extension-Vimeo-Video.aspx

# 11/11/2009 11:52:32 AM

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!

# 12/21/2009 12:58:40 AM

deepak said:

nice plugin dude.
i will definately integrate it in my site...
http://blogbzz.com

# 12/26/2009 10:11:42 PM

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

# 1/2/2010 5:45:56 AM

Thanks for the recommendation, Firoz! Definitely a nice feature for a future release.

# 1/9/2010 11:42:41 AM

carmen said:

Hi I added the extension to one of my sites. Works simple and great. Thkx a million.

# 1/12/2010 10:06:44 AM

Bill said:

Should put a caveat in the instructions about the issue of not working on "pages"

# 1/30/2010 4:14:05 AM

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!

# 1/30/2010 10:46:28 AM

Joel said:

This YouTube extension works really well. I'm using it on my blog. Thanks for creating it.

# 2/4/2010 5:46:52 PM

Glad to hear it, Joel! Cheers...

# 2/4/2010 6:26:49 PM

Jimmy Cocktail said:

Yet another satisfied customer. Thanks so much for doing this Al!

# 2/14/2010 11:13:49 AM

Valerie said:

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.

# 3/21/2010 11:47:15 AM

Jeff said:

Another very happy blog reader! Thanks for sharing the info on how to use the plugin!Thanks so much Al!KUDOS!

# 4/1/2010 10:36:26 AM

Joker said:

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?

# 4/13/2010 5:03:54 AM

Luiz Fernando said:

Thanks a lot man!!!!

# 5/7/2010 6:06:04 PM

dobin said:

Hi AL, thanks for the extension. i have modified the extension to work with BE pages too...it works perfectly both for POSTS AND PAGES...you can download it from here

developerspeaks.blogspot.com/.../...extension.html

# 5/11/2010 1:37:25 AM

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!

# 5/11/2010 12:13:55 PM

Thanks for the great work by Al Bshara and Dobin.
I have updated the newer version to include code to avoid related links screen which comes after completion of the youtube video.

If any one wants a copy of version 1.2.1 go to www.firozozman.com/.../...ogEnginenet-Updated.aspx

# 5/11/2010 6:13:01 PM

Dallas Wedding Pictures said:

Great post and video. I just reTweeted.

# 5/24/2010 12:02:58 PM

Victor Crowley said:

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.

# 6/2/2010 11:03:57 PM

Peter Jones said:

Thanks for the extension. It works well for me.

# 6/9/2010 4:50:44 AM

Thanks Victor, great suggestion! I'll sneak it in the next release.

# 6/20/2010 10:38:19 AM

Hey folks,

I've heard some rumblings that this and the Vimeo (al.bsharah.com/.../...T-Extension-Vimeo-Video.aspx) Extension are not working due to the new BE.NET 2.0 release.

Can others verify this? I haven't had any time to look into the new release, does anyone have a quick fix for it that I can get on-line?

Thanks for any help...

# 1/13/2011 9:43:38 AM

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

# 1/13/2011 10:02:15 AM

Joshua Brown said:

That works perfectly. Thanks, Al!

# 1/13/2011 11:06:57 AM

Awesome, Joshua. Thanks for the check!

I've updated the download links in the original post. On my way to updating the Vimeo plugin as well.

Cheers!

# 1/13/2011 11:34:48 AM

Henrik Jensen said:

Hi Al Bsharah,

Fantastic job updating your plugin to work in BE 2.0.
Keep up the good work

//Henrik

# 2/7/2011 6:28:32 AM

penny auctions said:

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!

# 2/9/2011 4:33:39 PM

Francesco said:

Hi,

Great job, thanks for your extension !!!

Francesco

# 2/22/2011 1:03:39 AM

doc said:

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.

# 3/5/2011 2:09:54 PM

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

# 3/5/2011 7:06:09 PM

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

# 3/6/2011 2:26:50 AM

Michael Stratychuk said:

Thanks for this extension! Works well! If you had flattr I'd gladly flattr it.

# 3/8/2011 5:24:10 PM

rtur said:

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.

# 3/9/2011 6:42:27 PM

Andreas L. said:

really great extension, thank you!
I've modified it a bit for direct facebook video integration when sharing a post-link in FB.
for details see my post: xtrm.cc/post.aspx

# 3/22/2011 12:05:17 AM