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!

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

Makanan Penambah Stamina
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

  Country flag

biuquote
  • Comentario
  • Vista previa
Loading

JASoft.org | Evítate problemas: pon SIEMPRE un nombre de aplicación en Web.config

JASoft.org

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

MENÚ - JASoft: JM Alarcón

Evítate problemas: pon SIEMPRE un nombre de aplicación en Web.config

El bueno de Scott Guthrie (del equipo de desarrollo de ASp.NET) puso ya hace tiempo un post muy bueno sobre porqué era muy recomendable (si no casi indispensable) poner un nombre dentro de web.config dentro de la configuración de los proveedores (tanto de Membership como de Roles, etc...).

El motivo es que si no lo hacemos, al mover la aplicación no seremos capaces de acceder a los datos que hay en la base de datos pues casi seguro que hemos cambiado la ruta de la aplicación respecto al servidor de desarrollo, y es muy desagradable :-(

Hoy me ha surgido una pregunta relacionada con esto y aprovecho la ocasión para recordarlo a todos los lectores de este blog desde aquí. Así que léete el post completo de Scott y ya sabes: que no se te olvidé nunca más :-)

Banner

Agregar comentario

  Country flag

biuquote
  • Comentario
  • Vista previa
Loading