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.
(+) Show Code
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
}
}
on December 30th, 2008 at 6:48 pm
Hi Ary
Fantasic post works for me, but I am unable to position it inside a silverlight control, currently just floats to bottom of screen.
Lance
on December 30th, 2008 at 8:53 pm
Hi Lance,
Once I thought I got it working, it seems it doesn't work in IE. However, it works if you set the windowless parameter of the Silverlight control to true, and the background to transparent. The only drawback of doing this is a performance penalty.
on February 18th, 2009 at 2:09 pm
Unfortunately this is the only way to do this w/ silverlight. I did something similar... encapsulated it in a usercontrol and implemented youtube's api so I can work w/ it declaratively in xaml. Works great in IE; having minor dhtml inconsistency and incompatibility issues w/ firefox and chrome. Still under development but you can preview it's usage at http://youballer.com.
on April 18th, 2009 at 3:57 pm
SL 3.0 it works without flash http://slyi.silverlight.googlepages.com/youtube2.html
on April 21st, 2009 at 6:42 pm
Hey Eldar,
can you please tell me how you did that in your website, i mean embed youtube on silverlight. i am new to this platform , please do help me .
looking forward for your reply .
Thank you
malla
on June 8th, 2009 at 11:54 am
Slyi,
Your post is great. Could you give me the XAML code and XAML.vb code for this one
on June 8th, 2009 at 5:17 pm
Hi Sam,
There's no XAML code for this. You embed the player with code. I don't know VB, but I'm sure there are tools out there to convert C# code to VB.
on July 22nd, 2009 at 5:54 am
I just used http://www.silverlight-blog.it/ontheroad/videoplayer/minoplayer_ver1_2.html and used a youtube proxy eg: VideoSource= http://ipod5.livebuster.com/fix.php?v=iYGuMUdoFGM , as SL3 now natively support mp4.
on January 6th, 2011 at 1:01 pm
Hi Malla.
Sorry for the late-late response. I worked on different things since my post and didn't come back to this development until now. The site is now called wusic (web music) and its source code, including my video and youtube controls, is available at http://wusic.codeplex.com.
Hopefully this response finds you well.
Cheers.
Eldar