Obtaining YouTube video ID in a URL and inputting selected video ID into a URL

I've been having trouble in trying to figure this out. What I am trying to do is, obtain the ID of a video from YouTube, and input the 11 character ID into the css of a div of a specific id by using jQuery. I know the URL for the thumbnail of any video, but I just need to be able to change the ID to display different video thumbnails.

<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>
   开发者_StackOverflow社区         <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 11 Character YouTube Video ID from the embedded code, and put it into the URL of the thumbnail (http://img.youtube.com/vi/" + function(data) + "/0.jpg"). Which, would then also replace the original div (<div id="304817679">).

Am I on the right track with my script?

I'm not quite sure what are you trying to do, but function cannot be called (afterwards) if it doesn't have a name. Also there were no variable data 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

OK, so what you really want is how to find and replace a text, it seems. Take a look at Find & replace jquery

Or are you having problems even with getting and setting the attribute at all?

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

there is no 'id' in those types of urls. If the owner has used bitly or similar, you can reverse the url online but still, one gets something like the above.

I haven't been able to figure out how to get the vid player to use that url via the YouTube api.