我有youtube视频和视频缩略图。默认情况下,视频处于隐藏状态。
我想要显示相关的视频点击视频缩略图,并显示在另一个div。
下面是我的HTML:
<ul id="result">
<div class="testt-1">
<h2 class="t1"> Name Tags </h2>
<iframe id="video-1" width="220" height="115" src="http://www.youtube.com/embed/2vwBkTRDczc" style="display:none;"></iframe>
<img id="img-1" src="https://img.youtube.com/vi/2vwBkTRDczc/0.jpg">
</div>
<div class="testt-2">
<h2 class="t1"> Yak Chews </h2>
<iframe id="video-2" width="220" height="115" src="http://www.youtube.com/embed/JQgFDi-vu1w" style="display:none;"></iframe>
<img id="img-2" src="https://img.youtube.com/vi/JQgFDi-vu1w/0.jpg">
</div>
<div class="testt-3">
<h2 class="t1"> tags </h2>
<iframe id="video-3" width="220" height="115" src="http://www.youtube.com/embed/I1K3lrSsde4" style="display:none;"></iframe>
<img id="img-3" src="https://img.youtube.com/vi/I1K3lrSsde4/0.jpg">
</div>
<div class="testt-4">
<h2 class="t1"> Yak Chews Bone </h2>
<iframe id="video-4" width="220" height="115" src="http://www.youtube.com/embed/yah872hDA8I" style="display:none;"></iframe>
<img id="img-4" src="https://img.youtube.com/vi/yah872hDA8I/0.jpg">
</div>
<div class="testt-5">
<h2 class="t1"> test </h2>
<iframe id="video-5" width="220" height="115" src="http://www.youtube.com/embed/PJQbuIarVgA" style="display:none;"></iframe>
<img id="img-5" src="https://img.youtube.com/vi/PJQbuIarVgA/0.jpg">
</div>
</ul>
<div class="large-video" data-id="large-video"></div>视频和缩略图通过PHP代码使用for-each循环列出。
https://stackoverflow.com/questions/47725523
复制相似问题