BlogEngine.NET Extension - YouTube Video

by Al Bsharah | 10.25.2008 07:37 PM | Comments (44)

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

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)

Share or Bookmark this Post…
  • E-Mail
  • TwitThis
  • Digg
  • Facebook
  • LinkedIn
  • del.icio.us
  • Google
  • MySpace
  • Ping.fm
  • StumbleUpon
  • Technorati
Categories: Development

Tags: , ,

Comments

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

Chris

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

Chris United States | Reply

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

Al Bsharah

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

Al Bsharah United States | Reply

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

Chris

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

Chris United States | Reply

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

Al Bsharah

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

Al Bsharah United States | Reply

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

Donald

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.

Donald United States | Reply

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

Al Bsharah

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

Al Bsharah United States | Reply

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

Mike H

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

Mike H United States | Reply

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

Keith Melton

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

Keith Melton United States | Reply

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

Al Bsharah

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

Cheers...

Al Bsharah United States | Reply

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

Ken

Works for me, too!

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

Ken United States | Reply

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

CebuHeart

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.

CebuHeart Republic of the Philippines | Reply

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

Al Bsharah

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

Al Bsharah United States | Reply

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

CebuHeart

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.

CebuHeart Republic of the Philippines | Reply

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

Firoz Ozman

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

Thanks

Firoz Ozman Canada | Reply

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

Lee mour

Hi,

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

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

Any idea?

Lee mour Germany | Reply

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

Lee mour

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

Lee mour Germany | Reply

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

Al Bsharah

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

Al Bsharah United States | Reply

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

Patrick

THANK YOU!!!!

Works Great!

Patrick United States | Reply

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

Al Bsharah

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

Al Bsharah United States | Reply

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

Simon

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

Simon United Kingdom | Reply

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

Al Bsharah

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

Al Bsharah United States | Reply

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

Eduardo

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

Eduardo Brazil | Reply

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

Eduardo

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 <

Eduardo Brazil | Reply

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

Autocratic Leadership

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

Autocratic Leadership United Kingdom | Reply

7/24/2009 9:49:53 AM #

trackback

BlogEngine Youtube Plugin

BlogEngine Youtube Plugin

Christopher Hamilton | Reply

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

MTR Investors Group

AWESOME! Thanks!!!

MTR Investors Group United States | Reply

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

Michael

Awesome plugin, thanks for creating this!

Michael United States | Reply

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

eric mooney

hi there,

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

eric mooney Ireland | Reply

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

Al Bsharah

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

Al Bsharah United States | Reply

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

Al Bsharah

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

Al Bsharah | Reply

11/1/2009 6:07:55 PM #

trackback

Publicar videos de YouTube en BlogEngine

Publicar videos de YouTube en BlogEngine

Daniel Costas | Reply

11/8/2009 11:52:14 AM #

trackback

Youtube Player extension

Youtube Player extension

Svetlozar Angelov | Reply

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

Nebbercracker

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.

Nebbercracker United States | Reply

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

Al Bsharah

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!

Al Bsharah United States | Reply

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

Al Bsharah

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

Al Bsharah United States | Reply

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

deepak

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

deepak India | Reply

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

Firoz Ozman

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

Firoz Ozman Canada | Reply

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

Al Bsharah

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

Al Bsharah United States | Reply

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

carmen

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

carmen Netherlands | Reply

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

Bill

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

Bill United States | Reply

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

Al Bsharah

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!

Al Bsharah United States | Reply

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

Joel

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

Joel United States | Reply

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

Al Bsharah

Glad to hear it, Joel!  Cheers...

Al Bsharah United States | Reply

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

Jimmy Cocktail

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

Jimmy Cocktail United States | Reply

Add comment


(Will show your Gravatar icon)

  Country flag

Click to change captcha
biuquote
  • Comment
  • Preview
Loading



Powered by BlogEngine.NET 1.6.0.0
Theme by Mads Kristensen

RecentComments

Comment RSS

Calendar

<<  March 2010  >>
MoTuWeThFrSaSu
22232425262728
1234567
891011121314
15161718192021
22232425262728
2930311234

View posts in large calendar

Tag cloud