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

我正在为我的网站制作一个所有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，但现在因为我的代码正在点击缩略图，所以什么也没做。我觉得我很接近，有人能帮我解决这个问题吗？