Question

我有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循环。

Answer 1

如果要在单击图像时显示视频。

您可以使用：

$( "#result>div>img" ).click(function(){
    var vid = $(this).prev().attr( "src" );
    $( ".large-video" ).html( '<iframe width="220" height="115" src="' + vid + '"></iframe>' );
});

以下是完整的示例代码：

$(document).ready(function(){
    $( "#result>div>img" ).click(function(){
	    var vid = $(this).prev().attr( "src" );
	    $( ".large-video" ).html( '<iframe width="220" height="115" src="' + vid + '"></iframe>' );
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<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>

Answer 2

在您的JS文件中，您可以获取特定缩略图的图像src属性的值，然后抓住要显示它的div，然后将视频标记附加到视频src值为的div中抓取的缩略图图像的值。

如何显示阻止元素并在另一个div中显示？

2 个答案: