创建可点击的视频缩略图，在上面的同一页面上加载视频

Question

我正在尝试为我的网站制作一个包含我所有 youtube 视频的视频库。到目前为止，我已经创建了一个视频缩略图网格，在它上面我有一个我最近的视频的 iframe。我想这样做，以便当用户单击主视频下方的缩略图之一时，最新的视频 iframe 将被该视频替换。我不太确定该怎么做。

我正在尝试制作的示例：

http://tubepress.com/demo/

到目前为止，这是我的代码：

<section class="second clearfix">
<header>
    <h1>Video Academy</h1>
</header>


<h2>Most recent video here</h2>
<p>Description of video</p>

<div class="embed-responsive embed-responsive-16by9 mbl">
    <iframe class="embed-responsive-item" src="//www.youtube.com/embed/ZuGHts631vM" allowfullscreen></iframe>
</div>

<article class="video">
    <figure>
        <a class ="thumbnails" data-video="www.youtube.com/embed/zH3ZohGnjcg"><img class="videoThumb" src="http://i1.ytimg.com/vi/zH3ZohGnjcg/mqdefault.jpg"></a>
    </figure>
    <h3 class="videoTitle">video1</h3>
    <p class ="time">6:13</p>

</article>

<article class="video">
    <figure>
        <a class="thumbnails" data-video="www.youtube.com/embed/_ZSefvtdYiY"><img class="videoThumb" src="https://secure-b.vimeocdn.com/ts/178/010/178010767_295.jpg"></a>
    </figure>
    <h3 class="videoTitle">video 2</h3>
    <p class ="time">4:36</p>

</article>

<article class="video">
    <figure>
        <a class="thumbnails" data-video="www.youtube.com/embed/_ZSefvtdYiY"><img class="videoThumb" src="http://i1.ytimg.com/vi/_ZSefvtdYiY/mqdefault.jpg"></a>
    </figure>
    <h3 class="videoTitle">video 3</h3>
    <p class ="time">15:23</p>

</article>

<script type="text/javascript" language="javascript">
$(document).ready(function() {
    $(".hoveritem").click(function() {
        var change = $(this).find('.videoThumb').data('video');

        $(".embed-responsive-item").attr('src', change);

    });
});

我尝试使用 javascript，但现在我的代码现在点击缩略图什么也没做。我觉得我很接近，有人可以帮我解决这个问题吗？

Answer 1

您应该能够在没有 javascript 的情况下执行此操作。使用命名你的 iframe

name="iframe-name"

所以，

<iframe name="iframe-name" class="embed-responsive-item" src="//www.youtube.com/embed/ZuGHts631vM" allowfullscreen></iframe>

然后将链接定位到您的 iframe

target="iframe-name"

所以，

<article class="video">
    <figure>
        <a target="iframe-name" class ="thumbnails" href="//www.youtube.com/embed/zH3ZohGnjcg"><img class="videoThumb" src="http://i1.ytimg.com/vi/zH3ZohGnjcg/mqdefault.jpg"></a>
    </figure>
    <h3 class="videoTitle">video1</h3>
    <p class ="time">6:13</p>

</article>

<article class="video">
    <figure>
        <a target="iframe-name" class="thumbnails" href="//www.youtube.com/embed/_ZSefvtdYiY"><img class="videoThumb" src="https://secure-b.vimeocdn.com/ts/178/010/178010767_295.jpg"></a>
    </figure>
    <h3 class="videoTitle">video 2</h3>
    <p class ="time">4:36</p>

</article>

<article class="video">
    <figure>
        <a target="iframe-name" class="thumbnails" href="//www.youtube.com/embed/_ZSefvtdYiY"><img class="videoThumb" src="http://i1.ytimg.com/vi/_ZSefvtdYiY/mqdefault.jpg"></a>
    </figure>
    <h3 class="videoTitle">video 3</h3>
    <p class ="time">15:23</p>

</article>