There’s no straight way of embedding YouTube videos in Silverlight. What you can do, however, is to create a floating div over the Silverlight plugin, whose content will be the YouTube video control. For this purpose, I wrote a simple class to make it easier to do this.
The usage is simple:
// ZCcedd9EfHI is the id of the video to show
YouTubePlayer player = new YouTubePlayer("ZCcedd9EfHI")
{
Top = 100,
Left = 200,
Width = 400,
Height = 400
};
player.Embed();
// And, once you want to remove the video from the page...
player.Dispose();
That’s it. Of course, you’ll have to compute the Top, Left, Width and Height values if you want to center the video inside a particular Silverlight control. You can do this computation in the Loaded event of that control.
And the best thing is, you can save a reference to the YouTubePlayer instance and, in case the Silverlight plugin is resized or moved, changing the Top, Left, Width and Height properties will automatically execute javascript code to move/resize the player.
Here’s the full code in case someone finds it useful.
using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Browser;
namespace Manas.Silverlight
{
/// <summary>
/// Allows embedding a YouTube player inside a Silveright application.
///
/// Invoking the Embed() method of an instance of this class simply creates
/// a floating div which contains an embedded YouTube flash player. For this
/// reason, the Top and Left properties are absolute, and not relative to
/// some particular Silverlight control.
///
/// The Dispose() method removes the div from the page.
///
/// Changing any dimension property of a player when it has already been embeded
/// updates the div properties to reflect the changes.
/// </summary>
public class YouTubePlayer : IDisposable
{
/// <summary>
/// The default with of a player, if none is specified.
/// </summary>
public const int DefaultWidth = 425;
/// <summary>
/// The default height of a player, if none is specified.
/// </summary>
public const int DefaultHeight = 344;
#region Private properties
private string uniqueId = Guid.NewGuid().ToString();
private double top;
private double left;
private double height = DefaultHeight;
private double width = DefaultWidth;
private string videoId;
private bool isEmbeded;
private HtmlElement div;
#endregion
/// <summary>
/// Creates a player for the given video id. You must invoke Embed()
/// later, to actually insert the video into the page.
/// </summary>
/// <param name="videoId"></param>
public YouTubePlayer(string videoId)
{
this.videoId = videoId;
}
/// <summary>
/// The absolute y position of this player.
/// </summary>
public double Top
{
get { return top; }
set
{
top = value;
if (isEmbeded)
{
SetStyleProperty(DivId, "top", """ + (int)top + "px"");
}
}
}
/// <summary>
/// The absolute x position of this player.
/// </summary>
public double Left
{
get { return left; }
set
{
left = value;
if (isEmbeded)
{
SetStyleProperty(DivId, "left", """ + (int)left + "px"");
}
}
}
/// <summary>
/// The height of this player.
/// </summary>
public double Height
{
get { return height; }
set
{
height = value;
if (isEmbeded)
{
SetAllDivsProperty("height", """ + (int)height + "px"");
}
}
}
/// <summary>
/// The width of this player.
/// </summary>
public double Width
{
get { return width; }
set
{
width = value;
if (isEmbeded)
{
SetAllDivsProperty("width", """ + (int)width + "px"");
}
}
}
/// <summary>
/// Allow fullscreen to be activated?
/// </summary>
public bool AllowFullScreen { get; set; }
/// <summary>
/// Embeds this player into the HTML page. Invoking this method many
/// times has no effect. You must invoke Dipose() to remove the player
/// form the HTML page.
/// </summary>
public void Embed()
{
if (isEmbeded) return;
isEmbeded = true;
div = HtmlPage.Document.CreateElement("div");
div.SetAttribute("id", DivId);
div.SetAttribute("style", "position: absolute; width:" + (int)Width + "px; height:" + (int)Height + "px; top: " + (int)Top + "px; left: " + (int)Left + "px; z-index:10");
div.SetProperty("innerHTML",
"<object width="" + (int)Width + "" height="" + (int)Height + "" id="" + ObjectId + "">" +
"<param name="movie" value="http://www.youtube.com/v/" + videoId + "&hl=en&fs=1"></param>" +
"<param name="allowFullScreen" value="" + AllowFullScreen + ""></param>" +
"<embed id="" + EmbedId + "" src="http://www.youtube.com/v/" + videoId + "&hl=en&fs=1" type="application/x-shockwave-flash" allowfullscreen="" + AllowFullScreen + "" width="" + (int)Width + "" height="" + (int)Height + ""></embed>" +
"</object>"
);
HtmlPage.Document.Body.AppendChild(div);
}
/// <summary>
/// Removes this embedded player from the HTML page. Has no effect if this
/// player was not embedded, or is already disposed.
/// </summary>
public void Dispose()
{
if (!isEmbeded) return;
isEmbeded = false;
HtmlPage.Document.Body.RemoveChild(div);
}
#region Implementation
private string DivId { get { return "YouTubePlayer" + uniqueId; } }
private string ObjectId { get { return "YouTubePlayer_Object_" + uniqueId; } }
private string EmbedId { get { return "YouTubePlayer_Embed_" + uniqueId; } }
private void SetAllDivsProperty(string property, object value)
{
SetProperty(DivId, property, value);
SetProperty(ObjectId, property, value);
SetProperty(EmbedId, property, value);
}
private void SetProperty(string divId, string property, object value)
{
HtmlPage.Window.Eval("document.getElementById("" + divId + "")." + property + " = " + value + ";");
}
private void SetStyleProperty(string divId, string property, object value)
{
HtmlPage.Window.Eval("document.getElementById("" + divId + "").style." + property + " = " + value + ";");
}
#endregion
}
}