Question

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>

这就是人群中的人。

       <a id="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>

Answer 1

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
    }

});

或者如果您对<代码>div要素的内容应当从某些地方上载到$( div )。

友情链接