JASoft.org

El blog de José Manuel Alarcón Aguín. Programación web y mucho más...

MENÚ - JASoft: JM Alarcón

YouTube and Vimeo advanced viewer extensions for BlogEngine.NET

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!

José Manuel Alarcón José Manuel Alarcón
Fundador y director de campusMVP.es, el proyecto de referencia en formación on-line para programadores en lengua española. Autor de varios libros y cientos de artículos. Galardonado como MVP de Microsoft desde 2004. Gallego de Vigo, amante de la ciencia y la tecnología, la música y la lectura. Ayudando a la gente en Internet desde 1996.
Mi último libro (no técnico): "Tres Monos, Diez Minutos".
Banner

Comentarios (6) -

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

Responder

Hi Andy:

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

Cheers!

Responder

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.

Responder

Hi Andy,

Thanks for sharing this with me!

Responder

United States Makanan Penambah Stamina

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

Responder

Hi, I really appreciate these great works. I'm wondering if any of this extension can be displayed on the widget or sidebar portion? If this can be done, any procedure is very much appreciated.

Thank you.

Responder

Agregar comentario