创建可点击的视频缩略图,在上面的同一页面上加载视频
Creating clickable video thumbnails that load video on the same page above
我正在尝试为我的网站制作一个包含我所有 YouTube 视频的视频库。到目前为止,我已经创建了一个视频缩略图网格,在它上面我有一个我最近视频的 iframe。我想这样做,以便当用户单击主视频下方的缩略图之一时,最新的视频 iframe 将被该视频替换。我不太确定该怎么做。
我正在尝试制作的示例:
到目前为止,这是我的代码:
<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,但现在我的代码点击缩略图没有任何反应。我觉得我很接近,任何人都可以帮我解决这个问题吗?
你应该可以在没有 javascript 的情况下做到这一点。使用
命名您的 iframe
name="iframe-name"
所以,
<iframe name="iframe-name" class="embed-responsive-item" src="//www.youtube.com/embed/ZuGHts631vM" allowfullscreen></iframe>
然后使用
将 link 定位到您的 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>
我正在尝试为我的网站制作一个包含我所有 YouTube 视频的视频库。到目前为止,我已经创建了一个视频缩略图网格,在它上面我有一个我最近视频的 iframe。我想这样做,以便当用户单击主视频下方的缩略图之一时,最新的视频 iframe 将被该视频替换。我不太确定该怎么做。
我正在尝试制作的示例:
到目前为止,这是我的代码:
<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,但现在我的代码点击缩略图没有任何反应。我觉得我很接近,任何人都可以帮我解决这个问题吗?
你应该可以在没有 javascript 的情况下做到这一点。使用
命名您的 iframename="iframe-name"
所以,
<iframe name="iframe-name" class="embed-responsive-item" src="//www.youtube.com/embed/ZuGHts631vM" allowfullscreen></iframe>
然后使用
将 link 定位到您的 iframetarget="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>