Get the YouTube video ID in the URL and enter the ID of the selected video in the URL

Question

I am having trouble trying to figure this out. What I'm trying to do is get the YouTube video id and enter 11 character identifiers in the css div specific id using jQuery. I know the thumbnail URL of any video, but I just need to change the identifier to display various thumbnails of the video.

 <script> $(document).ready(function() { function(data) { videoID = data.split('www.youtube.com/v/')[1].split('&amp')[0]; $("#304817679").append(videoID); }); $("#304817679").replaceWith("<div id=\"304817679\" " + "style=\"background: url(http://img.youtube.com/vi/" + $.function(data) + "/0.jpg) no-repeat middle; width: 15px; height: 150px;\"></div>"); }); </script> <div id="304817679"> <div style="display: none;"> <object width="248" height="222"> <param name="movie" value="http://www.youtube.com/v/vy90n2nNRKQ&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/vy90n2nNRKQ&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> </div> 

Trying to explain this better, I want the YouTube video ID with character 11 to be embedded in the code and put it in the thumbnail URL ( http://img.youtube.com/vi/" + function(data) + "/0.jpg" ). Which would also replace the original div ( <div id="304817679"> ).

Am I on the right track with my script?

Answer 1

I'm not quite sure what you are trying to do, but a function cannot be called (afterwards) if it does not have a name. Also, no variable data was defined.

  $(document).ready(function() { //lets give this function a name function getID(data) { //videoID is parsed nicely videoID = data.split('www.youtube.com/v/')[1].split('&amp')[0]; //this doesn't actually do anything useful since it is replaced afterwards $("#304817679").append(videoID); //to get a value out of function we need to return it return videoID; }; //background style wasn't defined correctly //changed to background-image and background-repeat //lets also supply getID function HTML as data $("#304817679").replaceWith("<div id=\"304817679\" " + "style=\"background-image: url(http://img.youtube.com/vi/" + getID($("#304817679").html()) + "/0.jpg); background-repeat: no-repeat; width: 15px; height: 150px;\"></div>"); }); 

Demo

Answer 2

Good, so what you really want is how to find and replace text. Take a look at Find and Replace jquery

Or are you having problems even getting and setting the attribute in general?

Answer 3

what happens if the youtube video url is: http://www.youtube.com/user/sothebysrealty?feature=watch

these types of URLs are missing an identifier. If the owner used the bit or the like, you can flip the URL online, but still, it’s something like the above.

I was not able to figure out how to get the vid player to use this url via the YouTube api.