problem with showing youtube on my page.

Rate It (1)

Last post 06-18-2009 1:27 AM by prabhuch85. 49 replies.

Sort Posts:

  • problem with showing youtube on my page.

    05-17-2009, 6:39 AM
    • Member
      37 point Member
    • Urko
    • Member since 10-18-2006, 11:44 AM
    • Posts 112

     hi,

    I have a datalist that shows the links from the databasa (MS access db) where the youtube links are stored. Now, if i copy the embed source from youtube in my database and i place a label then it works fine.

    Exmaple: <asp:Label ID="Label10" runat="server" Text='<%# Eval("VideoSource") %>' />

    However, i would prefer to use URL links from the youtube, but i just cant get it to work. I get blank page everytime.

    Could someone please tell me what im doing wrong and how is it possible to use URL links instead of embed code. I work in C#.

     

    Also...

    I found this scripts http://jquery-howto.blogspot.com/2009/05/jyoutube-jquery-youtube-thumbnail.html to show image thumbnails, but i dont know how to make it work with my database.

     
    $.extend({
    jYoutube: function( url, size ){
    if(url === null){ return ""; }

    size = (size === null) ? "big" : size;
    var vid;
    var results;

    results = url.match("[\\?&]v=([^&#]*)");

    vid = ( results === null ) ? url : results[1];

    if(size == "small"){
    return "http://img.youtube.com/vi/"+vid+"/2.jpg";
    }else {
    return "http://img.youtube.com/vi/"+vid+"/0.jpg";
    }
    }
    });



    // Returns big screenshot by video id
    $.jYoutube('rSUfWXcNAOw');

    // Returns small thumbnail by YouTube video URL
    $.jYoutube('http://www.youtube.com/watch?v=rSUfWXcNAOw', 'small'

      Thanks,
    Filed under: , ,
  • Re: problem with showing youtube on my page.

    05-17-2009, 7:02 AM
    • All-Star
      123,356 point All-Star
    • XIII
    • Member since 06-30-2002, 11:59 PM
    • Essen, Belgium
    • Posts 13,646
    • ASPInsiders
      Moderator
      TrustedFriends-MVPs

    Hi,

    you mentioned this: 

    Urko:
    i would prefer to use URL links from the youtube, but i just cant get it to work.

    What do these url links look like? Like this http://www.youtube.com/watch?v=rSUfWXcNAOw ?

    If so then you can display the urls in hyperlink controls in your datalist and use jQuery to handle the clicks. Something like this:

    Untested so beware of bugs:

    $(document).ready(function() {
      $('#<%= MyDataList.ClientID %> a').click(function(e) {
         $.jYoutube($(this).attr('href'));
         e.preventDefault();
      });
    });

     

    In this code sample I assume that the ID of the datalist is MyDataList like in <asp:DataList runat="server" ID="MyDataList"> and that you only have 1 column with hyperlink controls to which you set the href to be the url of the youtube video.

    Grz, Kris.

  • Re: problem with showing youtube on my page.

    05-17-2009, 7:14 AM
    • Member
      37 point Member
    • Urko
    • Member since 10-18-2006, 11:44 AM
    • Posts 112

     thanks for quick reply..as im newbie, is it possible to explain me a little how and where to place the code? i did search for some tutorials on this subject but i didnt really find any..

     

    thank you

  • Re: problem with showing youtube on my page.

    05-17-2009, 7:22 AM
    • All-Star
      123,356 point All-Star
    • XIII
    • Member since 06-30-2002, 11:59 PM
    • Essen, Belgium
    • Posts 13,646
    • ASPInsiders
      Moderator
      TrustedFriends-MVPs

    Hi,

    as you're a newbie I suggest that you first read this short but decent tutorials about javascript: http://www.w3schools.com/js/default.asp.

    You know how to put the datalist in your page with itemtemplates and in the itemtemplates place the HyperLink controls to which you set the NavigateUrl property to the data that comes out of the database (to which you bind to) and that contains the url of the youtube video. Take a look at http://www.ondotnet.com/pub/a/dotnet/2003/03/10/datalist.html to learn more about the datalist control. However instead of linkbuttons use the HyperLink ASP.NET control.

    Then, by using the mentioned tutorial, you add references to both jQuery (download from http://docs.jquery.com/Downloading_jQuery) and the jYoutube you mentioned in the <head> section of your form. Underneath that put the jQuery code I wrote in my former reply between <script> and </script> tags.

    Grz, Kris.

  • Re: problem with showing youtube on my page.

    05-17-2009, 8:21 AM
    • Member
      37 point Member
    • Urko
    • Member since 10-18-2006, 11:44 AM
    • Posts 112

     thank you for the reply.

     I actually did find this tutorial and based on that i did my datalist, but i dint use code behind as im still not familiar with it, so the datas are coming from the access data source.

    I do have one question. Why i do i get tthis erros:
    CS0103: The name 'DataList1' does not exist in the current context

    Line 26: <script type="text/javascript">
    Line 27: $(document).ready(function() {
    Line 28: $('#<%= DataList1.VideoPovezava %> a').click(function(e) {

     I did as u have wrote. I use master page and web user control.

    im still reading the tutorial, so i might get the answer there too, but i guess im getting too confused now with all the errors i get.

     thanks for your help..i really appreciate it.

  • Re: problem with showing youtube on my page.

    05-17-2009, 10:49 AM
    • All-Star
      123,356 point All-Star
    • XIII
    • Member since 06-30-2002, 11:59 PM
    • Essen, Belgium
    • Posts 13,646
    • ASPInsiders
      Moderator
      TrustedFriends-MVPs

    Hi,

    your code isn't the same as the one that I provided you. It should be 

    $('#<%= DataList1.ClientID %> a')
    instead if the name of your datalist is DataList1.
    In the hyperlink controls in the NavigateUrl property you can put the VideoPovezava to bind to (and here I assume that this is the corresponding column in your database that contains the link to the youtube movie).
    Try it again and if it doesn't work like stated above then provide the markup of your datalist and datasource control and the jquery parts.
    Grz, Kris. 

  • Re: problem with showing youtube on my page.

    05-17-2009, 11:01 AM
    • Member
      37 point Member
    • Urko
    • Member since 10-18-2006, 11:44 AM
    • Posts 112

     hi,

    yes the "videopovezava" holds the URL of the youtube movie.

    here's my datalist of the page reloading.ascx.

     <asp:DataList ID="DataList1" runat="server" CellPadding="4"

                    DataKeyField="VideoId" DataSourceID="VideoMoji" RepeatColumns="3">
    <ItemTemplate>
    </object>
    VideoId:
    <asp:Label ID="VideoIdLabel" runat="server" Text='<%# Eval("VideoId") %>' />
    <br />
    UserId:
    <asp:Label ID="UserIdLabel" runat="server" Text='<%# Eval("UserId") %>' />
    <br />

    <asp:HyperLink ID="HyperLink3" NavigateUrl='<%# DataBinder.Eval(Container.DataItem, "VideoPovezava") %>' runat="server"></asp:HyperLink>
    </ItemTemplate>
    </asp:DataList>
    <asp:AccessDataSource ID="VideoMoji" runat="server" OnSelecting="MojProfil_Selecting"
    DataFile="~/App_Data/Orozje-Reloading-Center.mdb"

    SelectCommand="SELECT VideoId, UserId, VideoNaslov, VideoPovezava, Datum FROM VIDEO_MOJI WHERE (UserId = ?) ORDER BY Datum DESC">
    <SelectParameters>
    <asp:Parameter Name="UserId" Type="Int32" />
    </SelectParameters>
    </asp:AccessDataSource>

     
    And reloading.aspx

     <%@ Page Title="" Language="C#" MasterPageFile="~/Themes/Default.master" AutoEventWireup="true" CodeFile="Reloading-desk.aspx.cs" Inherits="Reloading_desk" %> <%@ Register src="~/Modules/Reloading.ascx" TagName="Reloading_Desk" TagPrefix="RelCenter" %> <asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server"> </asp:Content> <asp:Content ID="Content2" ContentPlaceHolderID="Wrapper" Runat="Server"> <RelCenter:Reloading_Desk runat="server" ID="ReloadingDesk"/> </asp:Content>

      

    here's my master page. 
     

    <%@ Master Language="C#" AutoEventWireup="true" CodeFile="Default.master.cs" Inherits="Themes_Default" %>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


    <%@ Register src="~/Modules/Navigation.ascx" TagName="Navigation" TagPrefix="RelCenter" %>
    <%@ Register src="~/Modules/Footer.ascx" TagName="Footers" TagPrefix="RelCenter" %>
    <%@ Register src="~/Modules/Uporabnik.ascx" TagName="Uporabniki" TagPrefix="RelCenter" %>
    <%@ Register src="~/Modules/Header.ascx" TagName="Headers" TagPrefix="RelCenter" %>



    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <title>Reloading Center</title>
    <asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>
    <link href="RC-CSS.css" rel="stylesheet" type="text/css" />
    <link href="RC-NAV-CSS.css" rel="stylesheet" type="text/css" />
    <link href="RC-Objekti.css" rel="stylesheet" type="text/css" />
    <!--[if IE]>
    <link href="RC-IE7.css" rel="stylesheet" type="text/css" />
    <![endif]-->




    <script type="text/javascript" src="/Reloading-center/JS/jquery-1.3.1.js"></script>
    <script type="text/javascript" src="/Reloading-center/JS/jyuotube.js"></script>

    <script>
    $(document).ready(function() {
    $('#<%= DataList1.ClientID %> a').click(function(e) {
    $.jYoutube($(this).attr('href'));
    e.preventDefault();
    });
    });

    </script>


    <!-- FancyBox -->
    <script type="text/javascript" src="/Reloading-center/fancybox/jquery-1.2.3.pack.js"></script>
    <script language="JavaScript" src="/Reloading-center/fancybox/jquery.fancybox-1.0.0.js" type="text/javascript"></script>
    <script language="JavaScript" src="/Reloading-center/fancybox/jquery.pngFix.pack.js" type="text/javascript"></script>
    <script type="text/javascript" src="/Reloading-center/lib/jquery.jcarousel.pack.js"></script>
    <link rel="stylesheet" type="text/css" href="/Reloading-center/fancybox/fancy.css" />
    <script type="text/javascript">
    $(document).ready(function() {

    $("a#Shema ").fancybox({
    'overlayShow': true,
    'zoomSpeedIn': 0,
    'zoomSpeedOut': 0,
    'frameWidth': 600,
    'frameheight': 500
    });


    });

    function getGroupItems(opts) {
    jQuery.each(imageList, function(i, val) {
    opts.itemArray.push(val);
    });
    }

    </script>

    </head>
    <body>
    <form id="form1" runat="server">



    <div>
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>

    ......divs, classes.....
     




  • Re: problem with showing youtube on my page.

    05-17-2009, 11:08 AM
    • All-Star
      123,356 point All-Star
    • XIII
    • Member since 06-30-2002, 11:59 PM
    • Essen, Belgium
    • Posts 13,646
    • ASPInsiders
      Moderator
      TrustedFriends-MVPs

    Hi,

    at first glance this looks ok though I find this link to be strange:

    Urko:
    <script type="text/javascript" src="/Reloading-center/JS/jyuotube.js"></script>
     

    Shouldn't that be jyoutube.js instead?

    Also place this statement before e.preventDefault(); and see if you get an alert:

    alert('clicked');

    if you see the message "clicked" as an alert window when you click on one of the hyperlinks in the datalist then replace it with this:

    alert($(this).attr('href'));

    What does that show you?

    Grz, Kris.

  • Re: problem with showing youtube on my page.

    05-17-2009, 11:15 AM
    • Member
      37 point Member
    • Urko
    • Member since 10-18-2006, 11:44 AM
    • Posts 112

     actually that js file was originally saved as yuotube.js :)..didnt even noticed it spelled wrong..

    As this code is in master page, i cant open any page. it always gives me the datalist1 compilation error : Compiler Error Message: CS0103: The name 'DataList1' does not exist in the current context

    pointing on row 28:

    Line 28:     $('#<%= DataList1.ClientID %> a').click(function(e) {
     .

    I did some reading that some finding controls should be written in code behind if using user control? is that possible why it cant find my datalist in .ascx file when using this js code?

     

  • Re: problem with showing youtube on my page.

    05-17-2009, 11:20 AM
    • All-Star
      123,356 point All-Star
    • XIII
    • Member since 06-30-2002, 11:59 PM
    • Essen, Belgium
    • Posts 13,646
    • ASPInsiders
      Moderator
      TrustedFriends-MVPs

     Hi,

    that's because you placed the javascript code on the master page where the datalist control apparently isn't known. Place the code in jQuery that I created in my first reply on the same page/usercontrol as where DataList1 is defined.

    Grz, Kris.

  • Re: problem with showing youtube on my page.

    05-17-2009, 11:28 AM
    • Member
      37 point Member
    • Urko
    • Member since 10-18-2006, 11:44 AM
    • Posts 112

     ok, i placed your code in jquery file and the page opens now..however i dont see nothing.. only title of the movie is shown but no link or movie itself is displayed.

     

    Question. What is ClientID for inside your code?

  • Re: problem with showing youtube on my page.

    05-17-2009, 12:12 PM
    Answer
    • All-Star
      123,356 point All-Star
    • XIII
    • Member since 06-30-2002, 11:59 PM
    • Essen, Belgium
    • Posts 13,646
    • ASPInsiders
      Moderator
      TrustedFriends-MVPs

    Hi,

    when you render a webform and take a look at the source you can search for DataList1. You'll notice that the id will contain quite a lot more as the master page name, page name, ... To capture the generated id you use the ClientID property in javascript so that you don't have to change too much when you decide to place another container control around the datalist for example.

    Did you place the alert statements in the code like I asked in a former reply? If so when you click a link, what does that give you?

    Grz, Kris.

  • Re: problem with showing youtube on my page.

    05-17-2009, 12:21 PM
    • Member
      37 point Member
    • Urko
    • Member since 10-18-2006, 11:44 AM
    • Posts 112

     hi...thanks for answering me about cliend ID..i really didnt know what that was.

     

    I did as you told me and nothing happened. when i clicked the hyperlink it went directly to youtube.. no alerts.
     

     <script type"text/javascript">
              $(document).ready(function() {
                  $('#<%= DataList1.ClientID %> a').click(function(e) {
                      $.jYoutube($(this).attr('href'));
                      alert('clicked');
                      e.preventDefault();
                  });
              });
    
          </script>     
    
                <asp:DataList ID="DataList1" runat="server" CellPadding="4" 
                    DataKeyField="VideoId" DataSourceID="VideoMoji" RepeatColumns="3">
                    <ItemTemplate>
    </object>
                        VideoId:
                        <asp:Label ID="VideoIdLabel" runat="server" Text='<%# Eval("VideoId") %>' />
                        <br />
                        UserId:
                        <asp:Label ID="UserIdLabel" runat="server" Text='<%# Eval("UserId") %>' />
                        <br />
                        VideoNaslov:
            <asp:Label ID="Label9" runat="server" Text='<%# Eval("VideoNaslov") %>' />            
                   
                  
    <asp:HyperLink ID="HyperLink3" NavigateUrl='<%# DataBinder.Eval(Container.DataItem, "VideoPovezava") %>' Text='<%# Eval("VideoPovezava") %>' runat="server"></asp:HyperLink>
                        
              Datum:
    <asp:Label ID="DatumLabel" runat="server" Text='<%# Eval("Datum") %>' />
                        <br />
                        <br />
                    </ItemTemplate>
                </asp:DataList>
                <asp:AccessDataSource ID="VideoMoji" runat="server"  OnSelecting="MojProfil_Selecting"
                    DataFile="~/App_Data/Orozje-Reloading-Center.mdb" 
                    
                    SelectCommand="SELECT VideoId, UserId, VideoNaslov, VideoPovezava, Datum FROM VIDEO_MOJI WHERE (UserId = ?) ORDER BY Datum DESC">
                    <SelectParameters>
                        <asp:Parameter Name="UserId" Type="Int32" />
                    </SelectParameters>
                </asp:AccessDataSource>
     

  • Re: problem with showing youtube on my page.

    05-17-2009, 12:56 PM
    Answer
    • All-Star
      123,356 point All-Star
    • XIII
    • Member since 06-30-2002, 11:59 PM
    • Essen, Belgium
    • Posts 13,646
    • ASPInsiders
      Moderator
      TrustedFriends-MVPs

    Hi,

    I took the liberty to create something myself and got it to work Cool.

    This is my markup:

     

    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
    <title></title>

    <script src="../../Scripts/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script>
    <script src="../../Scripts/jyuotube.js" type="text/javascript"></script>
    <script type="text/javascript">

    $(document).ready(function() {
    $('#<%= DataList1.ClientID %> a').click(function(e) {
    var thumb = $.jYoutube($(this).attr('href'));
    $('#youtubeThumb').attr('src', thumb);
    e.preventDefault();
    });
    });

    </script>
    </head>
    <body>
    <form id="form1" runat="server">
    <div>
    <asp:DataList runat="server" ID="DataList1">
    <ItemTemplate>
    <asp:HyperLink runat="server" ID="hl" NavigateUrl='<%# Eval("url") %>' Text='<%# Eval("title") %>' />
    </ItemTemplate>
    </asp:DataList>
    <br />
    <img id="youtubeThumb" />
    </div>
    </form>
    </body>
    </html>
      

    And the code behind (I didn't have a database so I took the liberty to create a dummy List<T> with a custom class. You can keep on doing the binding with your access database:

     

        public partial class youtube1423991 : System.Web.UI.Page
    {
    protected void Page_Load(object sender, EventArgs e)
    {
    List<YouTubeDTO> list = new List()
    {
    new YouTubeDTO() { title = "Test", url = "http://www.youtube.com/watch?v=rSUfWXcNAOw" },
    new YouTubeDTO() { title = "
    Another video", url = "http://www.youtube.com/watch?v=1mebNNtuF7c" }
    };

    DataList1.DataSource = list;
    DataList1.DataBind();
    }
    }


    public class YouTubeDTO
    {
    public string url { get; set; }
    public string title { get; set; }
    }
      

    Grz, Kris.

  • Re: problem with showing youtube on my page.

    05-17-2009, 1:17 PM
    • Member
      37 point Member
    • Urko
    • Member since 10-18-2006, 11:44 AM
    • Posts 112

     i really appreciate your help. I guess i made myself a task that i cant handle as im far from even know what something means in code behind...will defentily need to read much more tutorials to understand :)

    so my final question is, what in code behind should i change to make it work with my db..

    i have no idea what to change as i get some words underlined like "List" - requires "1" type arguments and dont know what exactly to write to instead of  youtube urls 

     

    List<YouTubeDTO> list = new List() ;
    {
    new YouTubeDTO() { title = "Test", url = "http://www.youtube.com/watch?v=rSUfWXcNAOw" }; new YouTubeDTO() { title = "Another video", url = "http://www.youtube.com/watch?v=1mebNNtuF7c" }; }; DataList1.DataSource = list; DataList1.DataBind();
      
Page 1 of 4 (50 items) 1 2 3 4 Next >