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!

Escrito por un humano, no por una IA