Telligent YouTube video preview image

In this post I am going to explain how we can show the YouTube video preview image in Telligent media section.
I think must of them know (Who are working with Community server) about how to add YouTube video in media. Please check with this URL for more details http://shareourideas.wordpress.com/2010/07/10/telligent-supported-video-urls/. Now I am going explain how we can show the video preview image for YouTube videos

This is very easy, we can do this by adding few line in your web page.

In Desgin :-
Please the Media Gallery control as follow changes, Please take a backup before doing this.

<CSMedia:MediaGalleryPostData ID=”MediaGalleryPostDatamanage” LinkTo=”View” runat=”server” Tag=”Div” CssClass=”post-thumbnail”>
<ContentTemplate><div>
<CSMedia:MediaGalleryPostViewer ID=”MediaGalleryPostViewer1″ runat=”server” ViewType=”Preview” Width=”100″ Height=”100″ />
</div></ContentTemplate>
</CSMedia:MediaGalleryPostData>

Replace with this lines in mediaGallery control

<CSMedia:MediaGalleryPostData ID=”MediaGalleryPostDatamanage” LinkTo=”View” runat=”server” Tag=”Div” CssClass=”post-thumbnail”>
<ContentTemplate><div>
<CSControl:PlaceHolder ID=”PlaceHolder2″ runat=”server”>
<DisplayConditions Operator=”Not”>
<CSControl:CustomCondition ID=”CustomCondition1″  runat=”server” CustomResult=’<%# isYoutube(Eval(“AttachmentFilename”).ToString())%>‘ />
</DisplayConditions>
<ContentTemplate>
<CSMedia:MediaGalleryPostViewer ID=”MediaGalleryPostViewer1″ runat=”server” ViewType=”Preview” Width=”100″ Height=”100″ />
</ContentTemplate>
</CSControl:PlaceHolder>
<%# getYoutubeURL(Eval(“AttachmentFilename”).ToString())%>
</div></ContentTemplate>
</CSMedia:MediaGalleryPostData>

In Code:-

Just add three methods.

public string getYoutubeURL(string url)
{
try
{
if(url.ToLower().Contains(“http://www.youtube.com/”))
{
return “<img border=”0″ title=”youtube image” src=”” + GetYoutubePreviewImage(url) + “” width=”100″ height=”100″/>”;
}
else
{
return “”;
}
}
catch
{
return “”;
}
}

//This we can use any where it will return the image URL of given YouTube video URL.
public string GetYoutubePreviewImage(string youtubeURL)
{
try
{

string youtubeUrl = System.Web.HttpContext.Current.Server.HtmlEncode(youtubeURL);
// Index of query string parameter value ‘v’
int pos = youtubeUrl.LastIndexOf(“?v=”);
//Youtube Video ID v={11 characters}
string videoID = youtubeUrl.Substring(pos + 3, 11);
//Youtube video image  preview http://i3.ytimg.com/vi/JPEJnNrSSUo/hqdefault.jpg
string imageURL = “http://i3.ytimg.com/vi/” + videoID + “/hqdefault.jpg”;
return imageURL;
}
catch
{
//To set default image on error…
return “http://i3.ytimg.com/vi/youtube-vid/hqdefault.jpg”;
}
}

public bool isYoutube(string url)
{
try
{
if (url.ToLower().Contains(“http://www.youtube.com/”))
return true;
return false;
}
catch
{
return false;
}
}

I hope It is use full for you. Is there any best way to do this, please let me know about it, Thanks for sharing you idea with me..!

Enjoy while coding..!

Thanks
Naga Harish Movva.

One thought on “Telligent YouTube video preview image

Leave a Reply