ホバー上のサムネイルのJquery、クリック時の全画像。うまくいきません

Question

ランダムポジションjqueryとホバー/クリック機能を組み合わせて、ホバー上のランダムな位置にサムネイルを表示し、クリック時に右上にフルサイズを表示します。

は、私は2つの問題を抱えている：なし：それは動画では動作しません

1. のdivが画面に戻っていない場合、動画が再生を続けます。また、ビデオサムネイルはZ-indexに従わない：chromeで-50で他のすべての上に置く。

2. これは非常に複雑な方法です。

例：http://roingbaer.com

は非常に任意の助けに感謝。

HTML：

<div class="text"> 
    <p>Lorem Ipsum is simply dummy</p> 
    <div class="hover"> 
     <a href="http://example.com">text</a> 
     <div class="front"> 
      <img src="http://images.roingbaer.com/ludvig.png"/> 
     </div> 
    </div> 
    <p>, of the printing and typesetting industry.</p> 
    <div class="hover">Link 1 
     <div class="front"> 
      <img src="http://24.media.tumblr.com/tumblr_lyz7fjMdnN1rp3eymo1_r2_500.jpg"/> 
     </div> 
     <div class="back"> 
      <img src="http://24.media.tumblr.com/tumblr_lyz7fjMdnN1rp3eymo1_r2_500.jpg"/> 
     </div> 
    </div> 
    <p>,</p> 
    <div class="hover">Link 2 
     <div class="front"> 
      <iframe frameborder="0" height="233" src="http://www.youtube.com/embed/VMeXGE_a8Gg" width="400"></iframe> 
     </div> 
     d<div class="back"> 
      <iframe frameborder="0" height="480" src="http://www.youtube.com/embed/VMeXGE_a8Gg" width="853"></iframe> 
     </div> 
    </div> 
</div> 

CSS：

.back { 
    display:none; 
    width:100%; 
    height:100%; 
    position:fixed; 
    top:0; 
    text-align:right; 
} 

.front { 
    display:none; 
    max-height:200px; 
    max-width:auto; 
    position:fixed; 
    z-index:-50; 
    top:0; 
    right:100px; 
} 

.hover { 
    cursor:pointer; 
    margin:0; 
    padding:0; 
    font-style:italic; 
    display:inline; 
} 

のjQuery：

$(".front").each(function() { 
    var right = Math.floor(Math.random()*800); 
    var top = Math.floor(Math.random()*500); 
    $(this).css({'margin-right': right}); 
    $(this).css({'margin-top': top}); 
}); 

hoverdiv = $("div.hover") 
hoverdiv.on("hover", function() { 
    $(this).children(".front").show() 
}); 

hoverdiv.on("mouseleave", function() { 
    $(this).children(".front").hide() 
}) 

hoverdiv.on("click", function() { 
    $(this).children(".back").toggle() 
    $(this).children(".front").hide() 
}); 

Answer 1

あなたはこれをチェックすることをお勧めします：http://www.trustweb.it/it/blog/download/jquery-html5-video-tooltip.html