Now
a days integration of SNS - Social Networking Sites links and feeds to our site
is common requirement in almost all web application development.
This
article helps how to display Youtube
videos on webpage in ASP.NET.
If
you are interested in showing Facebook
feeds on ASP.NET page then read my article “How to show Facebook feeds on ASP.NET webpage”.
If
you are interested in showing Twitter
Tweets on ASP.NET page then read my article “How to get Twitter tweets on ASP.NET webpage”.
By
searching any keyword in Youtube , Youtube shows all relevant videos in
thumbnail with their description.
We
need to create similar functianlity in asp.net page.
For
this functionality we have to include this javascript in aspx page http://www.yvoschaap.com/ytpage/ytembed.js
We
need to call function ytEmbed.init() which is in ytembed.js
file.
ytEmbed.init({ 'block': 'youtubeDiv',
'type': 'search',
'q': 'baby
laughing', 'results': '4', 'order': 'new_first' });
This
function expect JSON string where its different parameter details with values
are
·
block - obligated ID of the html element (<div
id='this_is_the_block_id'>) where you want the results thumbnails to appear.
·
type - obligated setting that provides the function you want to
execute:
o search - YouTube searches for a video
with the string set by 'q'.
o playlist - results of a YouTube playlist
set by playlist id in 'q'.
o user - results of a YouTube user
videos set by user name in 'q'.
·
q - obligated string to identify your results, see 'type'
above.
·
results - the number of results you want to show.
·
order - what comes first:
o new_first - newest videos published on top
o highest_rating - highest rated videos on top
o most_relevance - most relevant videos on top
·
player - decide if you want to play the video on youtube.com or embed
on your page:
o embed - plays the video on your page.
o link - plays the video on youtube.com
·
display_first - display the player and queu first video results (needs player set to embed)
o true
·
width: embed player width
·
height: embed player height
·
layout - how do you want the results to appear:
o thumbnails - only a list of thumbnails as result.
o
full - list of results with thumbnail, description, rating and user
Ok
OK Ok. Now stop theory , show us code [ Afterall we all are developer who only
and mostly intersted in code J]
Get
searched keyword from user , query string etc.
I
am hard coding here. Lets find all videos on Youtube of great great man Steve Jobs.
protected void Page_Load(object
sender, EventArgs e)
{
YoutubeKeyword.Value
= "Steve Jobs";
}
Use
below ASPX page for displaying Youtube videos in thumbnail
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1"
runat="server">
<title>Show
Youtube Videos</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="http://www.yvoschaap.com/ytpage/ytembed.js"></script>
<script type="text/javascript">
$(document).ready(function() {
YouTubeFeeds($("#YoutubeKeyword").val());
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div>
<h1 align="left">
Youtube Videos</h1>
</div>
<div>
<div id="snsYouTube">
<script type="text/javascript">
function
YouTubeFeeds(YoutubeKeyword) {
ytEmbed.init({ 'block': 'snsYouTube',
'q': YoutubeKeyword, 'type': 'user', 'results': 7, 'order':
'most_relevance', 'player':
'embed', 'layout':
'full' });
}
</script>
</div>
</div>
</div>
<asp:HiddenField ID="YoutubeKeyword" runat="server"></asp:HiddenField>
</form>
</body>
</html>
Please
leave your comments or share this tip if it’s useful for you.
