Question

我有一个youtube视频，只有图片显示http://jsfiddle.net/308dctdd/1/ 并且视频会在点击时加载。<span>上的<div>元素应该隐藏在点击上。使用我的代码，第一个<span>元素会隐藏，但不会隐藏第二个。

html

<div class="vid">
   <img id="hide" src="http://img.youtube.com/vi/Z7JgY9zezj4/hqdefault.jpg" data-video="https://www.youtube.com/embed/Z7JgY9zezj4?autoplay=1" />
   <div id="hide1">
     <h3>Johnny Depp<br /><span>Acting Technique</span></h3>
   </div>
</div>
<div class="vid">
   <img id="hide" src="http://img.youtube.com/vi/Z7JgY9zezj4/hqdefault.jpg" data-video="https://www.youtube.com/embed/Z7JgY9zezj4?autoplay=1" />
   <div id="hide1">
     <h3>Johnny Depp<br /><span>Acting Technique</span></h3>
   </div>
</div>

JS

$('img').click(function () {
var video = $('<iframe />', {
    'src': this.dataset.video,
        'height': this.clientHeight,
        'width': this.clientWidth
});
$(this).replaceWith(video);
$('#hide1').hide();
});

css

.vid {
width: 350px;
height: 298px;
float: left;
margin: 20px 25px 70px 70px;
background-size: cover;
background-position: 0px -50px;
background-repeat: none;
position: relative;
}
.vid div {
overflow: hidden;
width: 300px;
background-color: rgba(255, 255, 255, 0.32);
position: absolute;
top: 10%;
left: 10%;
} 
.vid div h3 {
color: black;
font-family:'Montserrat', sans-serif;
font-size: 30px;
font-weight: bold;
background-color: rgba(255, 255, 255, 0.8);
max-width: 450px;
padding: 0.2em 0.3em;
}
.vid div h3 span {
color: black;
text-align: center;
width: 300px;
font-family:'Source Sans Pro', sans-serif;
font-style: italic;
font-weight: 400;
font-size: 19px;
}

Answer 1

替换JS：

$('img').click(function () {
$t = $(this).next("#hide1");
var video = $('<iframe />', {
    'src': this.dataset.video,
        'height': this.clientHeight,
        'width': this.clientWidth
    });
    $(this).replaceWith(video);
    $t.hide();
});

这是JSFiddle

Answer 2

这个怎么样？

$('#hide1').click(function() {
    $(this).hide();
});

单击时删除视频上的图像叠加

2 个答案: