abr 14 2011

YouTube and Vimeo advanced viewer extensions for BlogEngine.NET

JM AlarcónCategorías: Freeware

I was using the YouTubePlayer and VimeoPlayer extensions that come with BlogEngine.NET out of the box. They do a great work showing videos in desktop browsers, but I found some limitations that I wanted to overcome. So I decided to write my own extensions to substitute this two.

The YoutubeViewer and VimeoViewer extensions that I've written offer the following features:

  • Automatically embed a viewer for YouTube or Vimeo videos with a simple syntax. The basic syntax is Youtubesyntax and VimeoSyntax where XXXX is the video ID that you can get from the URL (squared in red in the images):

YouTubeID

VimeoID

  • The viewer adapt automatically to the capabilities of the browser used to browse your site. That means that they will be displayed correctly and full-featured even in mobile devices like iPhone, Android or iPad.
  • From the Extensions tab of BlogEngine you can set the default values for the viewer's Width, Height, Border (Yes or No), Include related videos (YouTube only), Allow Full Screen (YouTube only), Title text color (Vimeo only):

YouTubeSettings
Press to zoom

YouTubeSettings
Press to zoom

  • As long as videos vary a lot in aspect ratio, you can specify the dimensions you want for the video directly in the insertion code, just in case the default settings are not correct, for example: Youtubesyntax2inserts the video with ID 123456 using a viewer of 800 pixels of with and 600 pixels of height. In the same way you can use the Vimeo syntax: VimeoSyntax2
  • The YouTube viewer adds the ability to stay below any HTML layer on the page (transparent mode), so that unfoldable menus or other elements can be shown above the video. (Thanks to Andy McKay from Mobile TV World for putting me on this one)

To install just download this ZIP files: YouTubeViewer.zip and VimeoViewer.zip.

Uncompress then and copy the .cs files in the "App_Code/extensions" folder of your BlogEngine.NET blog. I advise you to delete the original YouTubePlayer.cs and VimeoPlayer.cs files.

Go to the Extensions tab of your BlogEngine dashboard and configure the default values for both extensions.

Enjoy!

Tags: ,

Comentarios (5) -

1.
Andy McKay Andy McKay United Kingdom dice:

Hi,

Firstly, the extension is good and thanks for sharing it.
I'm using it with drop down menus which require the YouTube video mode to be set to transparent, otherwise the menu appears behind the video.
This would apply to any content that might need to appear above the video, the fix is simple and appears to have no adverse affect.

The line in code:
viewer = @"<iframe width=""{1}"" height=""{2}"" src=""http://www.youtube.com/embed/{0}{4}"" frameborder=""{3}"" {5}></iframe>";

Becomes:
viewer = @"<iframe width=""{1}"" height=""{2}"" src=""http://www.youtube.com/embed/{0}{4}?wmode=transparent"" frameborder=""{3}"" {5}></iframe>";

2.
JM Alarc&#243;n JM Alarcón Spain dice:

Hi Andy:

Thank you very much for the tip, I didn't know about that param :-)

Cheers!

3.
Andy McKay Andy McKay United Kingdom dice:

Hi JM,

Just thought I'd let you know, I've made a YouTube video gallery of sorts based on your extension www.mobiletvworld.com/page/Video-Events.aspx
To make life easier I added a button to the tinyMCE editor that prompts for details and inserts all the placeholders.
Whilst I was at it, I made an editor button that does likewise for your extensions, I can pass this on if you think it may be of any use to you.

4.
JM Alarc&#243;n JM Alarcón Spain dice:

Hi Andy,

Thanks for sharing this with me!

5.
Makanan Penambah Stamina Makanan Penambah Stamina United States dice:

Gracias por la información que usted tiene que decir. Su sitio web realmente me ayudó.

Agregar comentario

  Country flag

biuquote
  • Comentario
  • Vista previa
Loading