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>

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

1 个答案: