点击时显示隐藏 youtube 视频

Question

Q1) 在页面加载时，Jquery 是否可以检查图像的文件名，然后设置 css 以将其定位在页面上？

Q2)最简单的管理方法是什么，用户不会在 div.icon 中嵌入 iframe 代码

我有一个播放按钮图标，它将出现在电子商务网站的产品描述中。当用户点击播放时，它会在产品图像 div 框内显示 youtube 视频。该图标将位于图像导航图标旁边，因此用户可以在浏览图片时选择查看视频。

我的代码似乎很好用：

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">
      <iframe width="480" height="220" src=
      "http://www.youtube-nocookie.com/embed/jvTv_oatLA0?rel=0" frameborder="0"
      allowfullscreen=""></iframe>
    </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://i46.tinypic.com/zmmbo8.png");
    background-repeat: no-repeat;
    height: 50px;
    left: 540px;
    position: relative;
    top: -104px;
    width: 50px;
    cursor:pointer;
}

div.icon iframe
{
    display:none;
    position:relative;
    top:30px;
}

div.product-image iframe
{
    position: absolute;
    top: 42px;
    left:42px;
}

JQ：

var $video=$('div.icon iframe');
var $productImage=$('.product-image');
var $icon=$('.icon');
$icon.on('click',function()
{
    $('.product-image').append($video);
});

jsfiddle： http://jsfiddle.net/t7qMF/2/

Answer 1

对于 Q1 Ishan 是正确的，您可以使用：

$('img[src="images/test.png"]').css("position","absolute");

对于第二季度：youtube 嵌入代码如下所示：

<iframe class="youtube-player" type="text/html" width="640" height="385" src="http://www.youtube.com/embed/VIDEO_ID" frameborder="0">

您可以尝试使用 iframe 类来选择它：

var $video=$('iframe.youtube-player');
var $productImage=$('.product-image');
var $icon=$('.icon');
$icon.on('click',function()
{
    $('.product-image').append($video);
});

然后，在 onload 事件中，您必须添加一些 jquery，它将用您的图标 div 包装每个 youtube iframe。我不确定，但这可能是这样的：

$(function() {
     $('iframe.youtube-player').each(function(){
         var $iconDiv = $(this).parent().append('<div class="icon"></div>');
         $(this).prependTo($iconDiv);
     });
});

希望对你有所帮助