这里是一个Youtube Carousel，其中包含我要使用的代码，但我希望这些视频能够像在YouTube上一样自动播放，但是在此示例中，您必须单击它们。我相信这里有人可以做到这一点。很多人想要这样的东西。我想与很多人分享这一点，因为他们不知道如何自己编写代码。
这是代码
/*JS FOR SCROLLING THE ROW OF THUMBNAILS*/
$(document).ready(function () {
$('.vid-item').each(function(index){
$(this).on('click', function(){
var current_index = index+1;
$('.vid-item .thumb').removeClass('active');
$('.vid-item:nth-child('+current_index+') .thumb').addClass('active');
});
});
});body {
margin: 30px;
padding: 0;
background: #ddd;
font-family: Arial, Helvetica, sans-serif;
}
.title {
width: 100%;
max-width: 854px;
margin: 0 auto;
}
.caption {
width: 100%;
max-width: 854px;
margin: 0 auto;
padding: 20px 0;
}
.vid-main-wrapper {
width: 100%;
max-width: 1100px;
min-width: 440px;
background: #fff;
margin: 0 auto;
}
/* VIDEO PLAYER CONTAINER
############################### */
.vid-container {
position: relative;
padding-bottom: 52%;
padding-top: 30px;
height: 0;
width:70%;
float:left;
}
.vid-container iframe,
.vid-container object,
.vid-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
min-height: 360px;
}
/* VIDEOS PLAYLIST
############################### */
.vid-list-container {
width: 30%;
height:360px;
overflow: hidden;
float:right;
}
.vid-list-container:hover, .vid-list-container:focus {
overflow-y: auto;
}
ol#vid-list {
margin:0;
padding:0;
background: #222;
}
ol#vid-list li {
list-style: none;
}
ol#vid-list li a {
text-decoration: none;
background-color: #222;
height:55px;
display:block;
padding:10px;
}
ol#vid-list li a:hover {
background-color:#666666
}
.vid-thumb {
float:left;
margin-right: 8px;
}
.active-vid {
background:#3A3A3A;
}
#vid-list .desc {
color: #CACACA;
font-size: 13px;
margin-top:5px;
}
@media (max-width: 624px) {
body {
margin: 15px;
}
.caption {
margin-top: 40px;
}
.vid-list-container {
padding-bottom: 20px;
}
}<div class="vid-main-wrapper clearfix">
<!-- THE YOUTUBE PLAYER -->
<div class="vid-container">
<iframe id="vid_frame" src="https://www.youtube.com/embed/cOSEOYi9JS4?rel=0&showinfo=0&autohide=1" frameborder="0" width="560" height="315"></iframe>
</div>
<!-- THE PLAYLIST -->
<div class="vid-list-container">
<ol id="vid-list">
<li>
<a href="javascript:void();" onClick="document.getElementById('vid_frame').src='https://youtube.com/embed/cOSEOYi9JS4?autoplay=1&rel=0&showinfo=0&autohide=1'">
<span class="vid-thumb"><img width=72 src="https://img.youtube.com/vi/cOSEOYi9JS4/default.jpg" /></span>
<div class="desc">WeatherBeater™ Product Video</div>
</a>
</li>
<li>
<a href="javascript:void();" onClick="document.getElementById('vid_frame').src='https://youtube.com/embed/9P7mEf4bilg?autoplay=1&rel=0&showinfo=0&autohide=1'">
<span class="vid-thumb"><img width=72 src="https://img.youtube.com/vi/9P7mEf4bilg/default.jpg" /></span>
<div class="desc">X-act Contour® Product Video</div>
</a>
</li>
<li>
<a href="javascript:void();" onClick="document.getElementById('vid_frame').src='https://youtube.com/embed/KHxNpXovl58?autoplay=1&rel=0&showinfo=0&autohide=1'">
<span class="vid-thumb"><img width=72 src="https://img.youtube.com/vi/KHxNpXovl58/default.jpg" /></span>
<div class="desc">GearBox® Product Video</div>
</a>
</li>
<li>
<a href="javascript:void();" onClick="document.getElementById('vid_frame').src='https://youtube.com/embed/D_a2UBGsePQ?autoplay=1&rel=0&showinfo=0&autohide=1'">
<span class="vid-thumb"><img width=72 src="https://img.youtube.com/vi/D_a2UBGsePQ/default.jpg" /></span>
<div class="desc">Mud Guards Product Video</div>
</a>
</li>
<li>
<a href="javascript:void();" onClick="document.getElementById('vid_frame').src='https://youtube.com/embed/vYoh2IgoBXg?autoplay=1&rel=0&showinfo=0&autohide=1'">
<span class="vid-thumb"><img width=72 src="https://img.youtube.com/vi/vYoh2IgoBXg/default.jpg" /></span>
<div class="desc">Wheel Well Guards Product Video</div>
</a>
</li>
<li>
<a href="javascript:void();" onClick="document.getElementById('vid_frame').src='https://youtube.com/embed/RTHI_uGyfTM?autoplay=1&rel=0&showinfo=0&autohide=1'">
<span class="vid-thumb"><img width=72 src="https://img.youtube.com/vi/RTHI_uGyfTM/default.jpg" /></span>
<div class="desc">Cargo Liner Product Video</div>
</a>
</li>
<li>
<a href="javascript:void();" onClick="document.getElementById('vid_frame').src='https://youtube.com/embed/EvTjAjLNphE?autoplay=1&rel=0&showinfo=0&autohide=1'">
<span class="vid-thumb"><img width=72 src="https://img.youtube.com/vi/EvTjAjLNphE/default.jpg" /></span>
<div class="desc">Husky Liners Products</div>
</a>
</li>
<li>
<a href="javascript:void();" onClick="document.getElementById('vid_frame').src='https://youtube.com/embed/-Qpc79oaJQg?autoplay=1&rel=0&showinfo=0&autohide=1'">
<span class="vid-thumb"><img width=72 src="https://img.youtube.com/vi/-Qpc79oaJQg/default.jpg" /></span>
<div class="desc">Custom Molded Mud Guards</div>
</a>
</li>
</ul>
</div>
</div>
答案 0 :(得分：2)
您的代码包含lazy load方法，以避免可怕的页面加载时间。如果您在加载DOM之后没有加载视频，则您的页面将非常缓慢地加载，因为它等待视频加载。另外，如果移动用户（未通过wi-fi连接）访问您的站点，他们将使用其数据包/计划中的相当多资源。
话虽如此，答案是将您的img元素替换为iframe元素。之后，您可以将?autoplay=1参数添加到YouTube URL的末尾。您的YouTube网址已经包含该参数，因此理想情况下，您应使用以下代码替换a（anchor）标签：
<a href="javascript:void();">
<iframe id="vid_frame" src="https://youtube.com/embed/vYoh2IgoBXg?autoplay=1&rel=0&showinfo=0&autohide=1" frameborder="0" width="560" height="315"></iframe>
<div class="desc">Wheel Well Guards Product Video</div>
</a>
必须将src property元素的iframe替换为您选择的YouTube视频。您还可以修改height和width属性。