Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 26
  1. #1
    New Coder
    Join Date
    Dec 2009
    Posts
    13
    Thanks
    2
    Thanked 0 Times in 0 Posts

    JQuery Help!: YouTube thumbnail variation

    Hi, I'm entirely new to scripting... and I've finally given up searching the internet and trying to come up with my own plugin.

    What I'm trying to do is obtain the ID of the YouTube video and inputting it into the css of a div tag as a background. Here's what I've come up with to do this:

    Code:
    vid = split('src="http://www.youtube.com/v/')[1].split('&rel=0&egm=0&showinfo=0&fs=1" type="application/x-shockwave-flash" width="248" height="222" allowFullScreen="true" wmode="transparent"')[0];
    (There are two splits because the needed 11-character ID is burried within the embed code.)

    The above grab the 11-character ID, and input it accordingly (I assume):
    Code:
    <div id="test" style="background: url(http://img.youtube.com/vi/"11-character ID ends up here"/0.jpg) no-repeat middle;">Content</div>
    So, I hope no one minds helping me. Thanks, in advance.

  • #2
    New Coder
    Join Date
    Dec 2009
    Posts
    13
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Sorry, for the double post. But, are there any takers?

  • #3
    Senior Coder tomws's Avatar
    Join Date
    Nov 2007
    Location
    Arkansas
    Posts
    2,644
    Thanks
    29
    Thanked 330 Times in 326 Posts
    You're not using any framework, so I'm not sure why you posted this in the frameworks forum. You would have received more response from the parent javascript forum.

    Are you trying to change the background on-the-fly, or do you just want to set a background image on page load?

    If the first, you're doing it wrong. You'll need to set the style dynamically, not in the style attribute of the tag.

    If the second, you need to do it on the server side.
    Are you a Help Vampire?

  • #4
    New Coder
    Join Date
    Dec 2009
    Posts
    13
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by tomws View Post
    You're not using any framework, so I'm not sure why you posted this in the frameworks forum. You would have received more response from the parent javascript forum.

    Are you trying to change the background on-the-fly, or do you just want to set a background image on page load?

    If the first, you're doing it wrong. You'll need to set the style dynamically, not in the style attribute of the tag.

    If the second, you need to do it on the server side.
    Oh, pardon my mistake. If a moderator would kindly move this thread to the parent javascript forum, I would be thankful.

    Specifically, I want to set a background image on page load. Where the obtained 11 character video ID is placed into the "test" div's background, after obtaining the video ID from the original embedded video (which is in a seperate div).

  • #5
    Senior Coder tomws's Avatar
    Join Date
    Nov 2007
    Location
    Arkansas
    Posts
    2,644
    Thanks
    29
    Thanked 330 Times in 326 Posts
    That would be much easier to do on the server-side. If you need help with that portion of it, drop a line in the PHP forum (or ASP, or whatever else you may be using).
    Are you a Help Vampire?

  • #6
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by Kotse View Post
    Oh, pardon my mistake. If a moderator would kindly move this thread to the parent javascript forum, I would be thankful.

    Specifically, I want to set a background image on page load. Where the obtained 11 character video ID is placed into the "test" div's background, after obtaining the video ID from the original embedded video (which is in a seperate div).
    something like this:
    Code:
    var yt = 'http://www.youtube.com/watch?v=Z0_Bfy0sVxU';
    var vid = yt.replace(/v=(.{11})/,"$1");
    then put vid where you want.

    best regards

  • #7
    New Coder
    Join Date
    Dec 2009
    Posts
    13
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by oesxyl View Post
    something like this:
    Code:
    var yt = 'http://www.youtube.com/watch?v=Z0_Bfy0sVxU';
    var vid = yt.replace(/v=(.{11})/,"$1");
    then put vid where you want.

    best regards
    To make it more generic, is it possible to obtain the yt variable from the actual embedded YouTube video within a specific <div>?

  • #8
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by Kotse View Post
    To make it more generic, is it possible to obtain the yt variable from the actual embedded YouTube video within a specific <div>?
    probably yes. Can you post a example with a div?

    best regards

  • #9
    New Coder
    Join Date
    Dec 2009
    Posts
    13
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by oesxyl View Post
    probably yes. Can you post a example with a div?

    best regards
    For example:
    Code:
    <div id="test" style="display: none;"><object width="248" height="222"><param name="movie" value="http://www.youtube.com/v/YCU-qgR_4bM&amp;rel=0&amp;egm=0&amp;showinfo=0&amp;fs=1"></param><param name="wmode" value="transparent"></param><param name="allowFullScreen" value="true"></param><embed src="http://www.youtube.com/v/YCU-qgR_4bM&amp;rel=0&amp;egm=0&amp;showinfo=0&amp;fs=1" type="application/x-shockwave-flash" width="248" height="222" allowFullScreen="true" wmode="transparent"></embed></object></div>

  • #10
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by Kotse View Post
    For example:
    Code:
    <div id="test" style="display: none;"><object width="248" height="222"><param name="movie" value="http://www.youtube.com/v/YCU-qgR_4bM&amp;rel=0&amp;egm=0&amp;showinfo=0&amp;fs=1"></param><param name="wmode" value="transparent"></param><param name="allowFullScreen" value="true"></param><embed src="http://www.youtube.com/v/YCU-qgR_4bM&amp;rel=0&amp;egm=0&amp;showinfo=0&amp;fs=1" type="application/x-shockwave-flash" width="248" height="222" allowFullScreen="true" wmode="transparent"></embed></object></div>
    Code:
    var objid = document.getElementById('test');
    var plist = objid.getElementsByTagName('param');
    for(var i=0; i< plist.length; i++){
      if(plist[i].name == 'movie'){
        var yt = plist[i].value;
        var vid = yt.replace(/v\/(.{11})/,"$1");
      }
    }
    it's just a improvisation, I'm sure can be rewrited in better way, but this is the idea.

    best regards

  • #11
    New Coder
    Join Date
    Dec 2009
    Posts
    13
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by oesxyl View Post
    Code:
    var objid = document.getElementById('test');
    var plist = objid.getElementsByTagName('param');
    for(var i=0; i< plist.length; i++){
      if(plist[i].name == 'movie'){
        var yt = plist[i].value;
        var vid = yt.replace(/v\/(.{11})/,"$1");
      }
    }
    it's just a improvisation, I'm sure can be rewrited in better way, but this is the idea.

    best regards
    Code:
    <script>
    $(document).ready(function() {
    var objid = document.getElementById('test');
    var plist = objid.getElementsByTagName('param');
    for(var i=0; i< plist.length; i++){
      if(plist[i].name == 'movie'){
        var yt = plist[i].value;
        var vid = yt.replace(/v\/(.{11})/,"$1");
      }
    }
    
    $(function () {
    $("#here").append("<div style="background: url(http://img.youtube.com/vi/" + vid + "/0.jpg) no-repeat middle; 
    
    width: 150px; height: 150px;"></div>");
    });
    });
    </script>
    <div id="here">
    <div id="test" style="display: none;">video embedded here</div>
    </div>
    The above is how I'm actually placing it in the html. I don't know what I'm doing wrong, since it won't add the div that I'm trying to add within the "here" div.

    Thanks for helping me, by the way.

  • #12
    Senior Coder tomws's Avatar
    Join Date
    Nov 2007
    Location
    Arkansas
    Posts
    2,644
    Thanks
    29
    Thanked 330 Times in 326 Posts
    "here" is an id - it needs the "#": $('#here')
    Are you a Help Vampire?

  • Users who have thanked tomws for this post:

    Kotse (12-30-2009)

  • #13
    New Coder
    Join Date
    Dec 2009
    Posts
    13
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by tomws View Post
    "here" is an id - it needs the "#": $('#here')
    Yeah, I saw that and changed it accordingly. It still doesn't work...

  • #14
    Senior Coder tomws's Avatar
    Join Date
    Nov 2007
    Location
    Arkansas
    Posts
    2,644
    Thanks
    29
    Thanked 330 Times in 326 Posts
    You also have an issue with quotes in that line. Your browser should be spitting out a javascript error.
    Are you a Help Vampire?

  • #15
    New Coder
    Join Date
    Dec 2009
    Posts
    13
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by tomws View Post
    You also have an issue with quotes in that line. Your browser should be spitting out a javascript error.
    Oh, how should I write it?


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •