播放图标 youtube 视频 div 覆盖答案

【问题标题】：play icon youtube video div overlay播放图标 youtube 视频 div 覆盖
【发布时间】：2012-06-19 10:04:23
【问题描述】：

我有一个图像导航，但客户想通过产品描述添加一个视频图标。

当用户点击视频图标时，它应该将 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;
}

编辑：

应该基于图标点击。
并根据图标的点击显示和隐藏。
需要将视频嵌入到图标 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);
});

【问题讨论】：

标签： javascript jquery youtube overlay

【解决方案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.
});

【讨论】：

应该基于图标点击...谢谢。
视频需要嵌入到icon div中，以便客户端可以更改视频。
很容易适应您的要求。只需将点击处理程序更改为图标并将视频附加到不同的父级。如果要切换显示/隐藏，请在 HTML 中添加 iframe 并将其显示设置为 none。然后点击调用toggle()。
我已经将 iframe 添加到 HTML 标记中，现在只需要将显示隐藏。
我在标记中看不到 iframe。你到底需要什么？用户单击图标 div（顺便说一下，您不需要 &nbsp;），然后视频将附加到 .product-image div。你想要什么不同的？

【解决方案2】：

您可以使用您的 tube api 来做到这一点：

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

Read You Tube API 参考：https://developers.google.com/youtube/js_api_reference?hl=fr-FR#onYouTubePlayerReady

【讨论】：