Using Jquery to Load and Unload a Div Element

I am using CSS to create a popup when a user hovers on a list of thumbnails. This will show a different youtube video for each thumbnail posted, I already have it working. The problem is that when I move the mouse somewhere else so that it can hide the popup, the video stays playing on the background. The other problem is that when i visit the page where all my posts with thumbnails are, it seems to be loading all the youtube videos in the background causing it to slow down my page. I want it to load only when hovering on the thumbnail and unload so that the video stops playing once i hover outside the popup.I don't know too much on jquery, but i tried this code, im guessing it's something like this that I need...

<script type="text/javascript">
/* The first line waits until the page has finished to load and is ready to manipulate */
$(document).ready(function(){

    if ($('#vidthumbnail').is(':visible')) {
        $('#vidthumbnail').show();
    }


     if ($('#vidthumbnail').empty(':visible')) { 
        $('#vidthumbnail').hide();
    }

});
</script>

This is what's inside the popup

       <a i开发者_运维百科d="vidthumbnail" href="#thumb"><img src="thumb.gif"/>
         <span>
            <div id="vidthumbnail">
            **the youtube embedded code goes here, every post with unique id** 
           </div>
         </span>
   </a> 

You can use $('div').html('some html') to set some html to the div and $('div').html('') to clear it.

$(document).ready(function(){

    if ($('#vidthumbnail').is(':visible')) {
        $('#vidthumbnail').html('format youtube code here')
                          .show();
    }


     if ($('#vidthumbnail').empty(':visible')) { 
        $('#vidthumbnail').hide().html(''); // remove anything
    }

});

Or if your content for div element should be loaded from somewhere use $('div').load(url_goes_here)