BlogEngine.NET Extension - YouTube Video

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

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 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 - YouTubePlayer-1-2.zip (1.45 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
=================

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)

 

Share | | |

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

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

Valerie

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.

Valerie United States | Reply

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

Jeff

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

Jeff United States | Reply

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

Joker

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?

Joker United States | Reply

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

Luiz Fernando

Thanks a lot man!!!!

Luiz Fernando Brazil | Reply

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

dobin



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

dobin India | Reply

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

Al Bsharah

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!

Al Bsharah United States | Reply

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

trackback

BlogEngine.NET YouTube Video Extension Updated to Version 1.2

BlogEngine.NET YouTube Video Extension Updated to Version 1.2

Al Bsharah | Reply

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

Firoz Ozman

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

Firoz Ozman Canada | Reply

5/16/2010 8:41:00 AM #

trackback

Scorpions - The Good Die Young feat Tarja Turunen

Scorpions - The Good Die Young feat Tarja Turunen

Somewhere I Belong | Reply

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

Dallas Wedding Pictures

Great post and video.  I just reTweeted.

Dallas Wedding Pictures United States | Reply

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

Victor Crowley

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.

Victor Crowley United States | Reply

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

Al Bsharah

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

Al Bsharah United States | Reply

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

Peter Jones

Thanks for the extension. It works well for me.

Peter Jones United Kingdom | Reply

7/10/2010 11:54:11 AM #

trackback

First Thing First

First Thing First

arifhazwanhashim | Reply

Add comment
Anything that hints of SPAM will be either caught by my filters or deleted by me, so please don't waste your time or mine.


(Will show your Gravatar icon)

  Country flag

Click to change captcha
biuquote
  • Comment
  • Preview
Loading



RecentComments

Comment RSS

Calendar

<<  July 2010  >>
MoTuWeThFrSaSu
2829301234
567891011
12131415161718
19202122232425
2627282930311
2345678

View posts in large calendar

Tag cloud