javascript - 单击时显示隐藏 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");

对于第 2 季度: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);
     });
});

希望对您有所帮助