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

Question

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>
            <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?

Answer 1

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