uTube Documentation

Installation

Install uTube like you would any other Umbraco package.
After installation has completed succesfully, you will be presented with a success screen and a code snippet screen like so:


If you wish to use the Chromeless uTube player you will need to ensure you including the following on the page where you want to use it:

 

<!-- uTube CSS -->
<link href="/css/uTube.chromeless.player.css" rel="stylesheet" type="text/css" />

<!-- jQuery, SWFObject & uTube JS -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script type="text/javascript" src="/scripts/uTube/chromeless.player.js"></script>

Note that you may already have references to the jQuery & SWFObject libraries, if so then ignore those references in the following code snippet.
Once you have this added you are then ready to use uTube.

Files Installed

Installing uTube installs the following into your Umbraco site:

Files

  • /bin/Google.GData.Client.dll
  • /bin/Google.GData.Extensions.dll
  • /bin/Google.GData.YouTube.dll
  • /bin/uTube.Core.dll
  • /css/uTube.chromeless.player.css
  • /css/uTube/player-buttons.png
  • /css/uTube/sound.png
  • /scripts/uTube/chromeless.player.js
  • /usercontrols/uTube/post-install.ascx
  • /xslt/uTube/chromeless.player.xslt
  • /xslt/uTube/chromeless.player.media.xslt

Macros

  • [uTube] Chromeless Player
  • [uTube] Chromeless Player Media
  • [uTube] Classic Player

DataTypes

  • uTube Single Video Picker
  • uTube Video Uploader

Misc

  • Automatically creates new Media Type - YouTube Video (Upload)
  • Add XSLT extension in config file - uTube.Core.XsltExtensions.Library

[Macro] Chromeless Player

Macro Properties:

  • YouTube Video URL or ID - uTubeVideo
  • YouTube Video Width in pixels (eg: 320) [Optional] - uTubeWidth
  • YouTube Video Height in pixels (eg: 240) [Optional] - uTubeHeight

Macro Use:

  • In RichText Editor
  • On a template
    • Hardcoded values
    • Or pass in values from document type [#myVariable]
      • Use uTube Single Video Picker for Video ID/Video URL

Example:

<umbraco:Macro uTubeVideo="[#youTubeVideo]" uTubeWidth="" uTubeHeight="500" Alias="uTube.ChromelessPlayer" runat="server"></umbraco:Macro>

CSS Customisation
You can customise the look and feel of your chromeless player by editing the CSS file - /css/uTube.chromeless.player.css

[Macro] Chromeless Player Media

Macro Properties:

  • Media ID - mediaID
  • YouTube Video Width in pixels (eg: 320) [Optional] - uTubeWidth
  • YouTube Video Height in pixels (eg: 240) [Optional] - uTubeHeight

Macro Use:

  • In RichText Editor, pick a media item - YouTube Video (Upload)
  • On a template
    • Hardcoded values
    • Or pass in values from document type [#myVariable]
      • Use a media picker that gets the mediaID

This macro acts as a proxy to the Chromeless player macro for the following reason:

  • In media section there is a new media type called YouTube Video (Upload)
  •  Create a new media item in media section using the new Media Type like Folder, Image, File & YouTube Video (Upload)
  • Browse to the new media item and choose a video to upload to YouTube and fill out the other details like tags, title and description
  • Save the media item - it uploads the video to YouTube and the media item saves the VideoID as the value
  • Its this VideoID that gets saved to the Media Item XML that we want to use with the Chromeless Player macro
  • However if we use a media picker to pick the media item for the macro we get the Media Umbraco Node ID and not the VideoID
  • Hence the Chromeless Player Media macro

Example:

<umbraco:Macro mediaID="[#videoPicker]" uTubeWidth="" uTubeHeight="500" Alias="uTube.ChromelessPlayer.media" runat="server"></umbraco:Macro>

CSS Customisation
You can customise the look and feel of your chromeless player by editing the CSS file - /css/uTube.chromeless.player.css

[Macro] Classic Player

Macro Properties:

  • Allow Full Screen - AllowFullScreen
  • Video Url - VideoUrl
  • Video Width - VideoWidth
  • Video Id - VideoId
  • Aspect Ratio  - AspectRatio
  • Video Height - VideoHeight

Macro Use:

  • In RichText Editor 
  • On a template
    • Hardcoded values
    • Or pass in values from document type [#myVariable]
      • Use a media picker that gets the mediaID

Example:

<umbraco:Macro AllowFullScreen="1" VideoUrl="[#youTubeVideo]" VideoWidth="" VideoId="" AspectRatio="" VideoHeight="" Alias="uTube.ClassicPlayer" runat="server"></umbraco:Macro>

[DataType] uTube Single Video Picker

[Lee]

[DataType] uTube Video Uploader

[Morten]

Last edited Nov 2, 2010 at 5:25 PM by warrenbuckley, version 10

Comments

jlathigee Mar 18, 2012 at 8:12 PM 
@labanino: the Classic Player doesn't use an XSLT to render. What I did (not ideal) is download the source code, and alter uTube.Core.Extensions.Common GetYouTubeEmbedCode() function so that object had additional param tags (param name="wmode" value="transparent") and embed had additional wmode parameter (wmode="transparent").

Then built and copied the revised uTube.core.dll over to my Umbraco bin.

If I had the time, I would have added wmode as a parameter of the macro, but this is a one-time "just make it work" situation.

labanino Sep 17, 2011 at 8:49 PM 
Hi! I've been trying to add the parameter wmode="transparent" to the [uTube] Classic Player with no success. Already created the parameter for the macro in the macro tab but I don't know how to do it for the XSLT. I added <![CDATA[" wmode="]]><xsl:value-of select="/macro/wmode"/><![CDATA["> (wmode is the name and alias I choose for the param) to the XSLT but it's not working. Any help? Thanks.

robertjf Nov 23, 2010 at 3:10 PM 
Regarding my first comment - I ended up dealing the second issue by creating a wrapper xslt macro to gracefully degrade to an image if the video wasn't specified... details on my blog here:
http://refactored.com.au/blog/2010/11/24/enabling-alternate-media-with-the-utube-umbraco-package
Thanks again for a great package :)

robertjf Nov 23, 2010 at 1:39 PM 
Firstly, love the package. Got a couple of suggestions for you:
1. Can we have an option to "import" an existing youtube video into the Media repository instead of uploading one (for those videos that were uploaded pre-utube). Possibly as an alternate option in the utube uploaded media type
2. How about providing a parameter for the macros to allow the use of an alternate image if the video id is empty...

Thanks!