播放圖標YouTube視頻的div覆蓋

Question

我有一個形象的資產淨值，但客戶希望通過產品描述中添加視頻圖標。

當用戶點擊視頻圖標就應該覆蓋的主要產品圖片頂部的YouTube視頻。有點像隱藏它，只是顯示視頻。

我找不到任何jQuery插件，能做到這一點？

這是我所創建的，當你點擊我要紅框內的播放上的圖像的頂部的YouTube視頻的圖標播放一些示例標記。

看我的例子：http://jsfiddle.net/mC5c3/4/

HTML：

<div class="container"> 

<div class="product-image"> 
<img src="http://www.skriftlig.com/konfliktmegling/wp-content/uploads/2010/02/Photoxpress_2658886-480x220.jpg" alt="http://www.skriftlig.com/konfliktmegling/wp-content/uploads/2010/02/Photoxpress_2658886-480x220.jpg"> 
</div> 

    <div class="image-nav"> 
    </div> 

    <div class="icon"> 
     &nbsp 
    </div> 

</div> 

CSS：

div.container 
{ 
    margin:10px 10px auto; 
    border:1px solid orange; 
} 

div.product-image 
{ 
    height:220px; 
    width:480px; 
    border:1px solid red; 
    margin:30px;   
} 

div.image-nav 
{ 
    border:1px solid black; 
    width:500px; 
    height:100px; 
    margin:30px; 
} 

div.icon 
{ 
background-image: url("http://i.stack.imgur.com/zsQik.png"); 
    background-repeat: no-repeat; 
    height: 50px; 
    left: 540px; 
    position: relative; 
    top: -104px; 
    width: 50px; 
} 

編輯：

1. 應該基於圖標點擊。
2. 並根據圖標的點擊顯示和隱藏。
3. 視頻需要嵌入到圖標div中，以便客戶端可以更改視頻。

我添加了一個點擊事件，並調整大小的視頻

var $video=$('<iframe width="480" height="220" src="http://www.youtube-nocookie.com/embed/jvTv_oatLA0?rel=0" frameborder="0" allowfullscreen></iframe>'); 
var $productImage=$('.product-image'); 
var $icon=$('.icon'); 
$icon.on('click',function() 
{ 
    $('.product-image').append($video); 
}); 

Answer 1

var $icon=$('.icon'); 
var $video=$('.product-image iframe'); 
$icon.on('click',function() 
{ 
    $video.toggle();//Shows the video if hidden, hides the video if visible. 
}); 

Answer 2

爲此，您可以使用您管API：

function play() { 
    if (ytplayer) { 
    ytplayer.playVideo(); 
    } 
} 

念你管API參考：https://developers.google.com/youtube/js_api_reference?hl=fr-FR#onYouTubePlayerReady