Saturday, December 1, 2012

To embed Youtube videos in Windows 8 xaml


I was making my 5th windows 8 application called National Geographic for Windows 8. The best part of the channel’s info lies in videos and all the major videos are uploaded on  YouTube. Though YouTube exposes all the videos through its feeds, its difficult to embed their video in xaml. Mainly because xaml does not support Flash. Now YouTube supports HTML 5 videos but I was not able to find many such videos. So I thought of going ahead with Flash players in xaml. The trick lied in embedding the player in an Iframe in a WebView.

This is the code snippet,
 str = string.Format(@"<iframe width='{0}' height='{1}' src='{2}' frameborder='{3}'></iframe>", videoView.ActualWidth - 10, videoView.ActualHeight - 10, link, 0);
videoView.NavigateToString(str);
where "link" is my YouTube video url and  "videoView" is my WebView control in the xaml like this

<Grid Style="{StaticResource LayoutRootStyle}">
<WebView x:Name="videoView" Grid.Row="2" Margin="120,0,10,90"/>
</Grid>

I just did a bit of styling and here is the output,

4 comments:

tawfik said...

thanks, so much usefull

Anonymous said...

Like this?

string str;
str = string.Format(@"iframe width='{0}' height='{1}' src='{2}' frameborder='{3}'/iframe", videoView.ActualWidth - 10, videoView.ActualHeight - 10, "http://youtube.googleapis.com/v/LMc_LAroq8M&feature", 0);
videoView.NavigateToString(str);

Ramya said...

Hello Tawfik,
Yes...

Anonymous said...

Hello I'm a novice programming.
Sorry for my question I think is for beginners, but I need to do anything else?
I put your lines in my mainpage.xaml and mainpage.xaml.cs

but I only have the blank iframe. Could you help me?

Post a Comment