Surendra Sharma

Surendra Sharma

Search This Blog

Tuesday, August 27, 2013

How to Show YouTube videos on ASP.NET webpage

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 page.

For this functionality we have to include this javascript in aspx page

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 or embed on your page:
o    embed - plays the video on your page.
o    link - plays the video on
·         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="">
<head id="Head1" runat="server">
    <title>Show Youtube Videos</title>

    <script type="text/javascript" src=""></script>

    <script type="text/javascript" src=""></script>

    <script type="text/javascript">
        $(document).ready(function() {

    <form id="form1" runat="server">
            <h1 align="left">
                Youtube Videos</h1>
            <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' });

    <asp:HiddenField ID="YoutubeKeyword" runat="server"></asp:HiddenField>

Reference :- Most of the stuff are referred from

Please leave your comments or share this tip if it’s useful for you.

No comments:

Post a Comment