点击<li>项目即可播放YouTube视频

Question

如果有人问过这个问题我会道歉。我在尝试之前尝试在线搜索，但尚未找到解决我情况的答案。

我正在开发一个网站，其中有一个列表（使用<li>）在视频右侧，如果用户点击列表中的其他项目，则会播放一个新视频代替以前的视频，如果有意义的话。

我更喜欢让我的代码尽可能干净。如果可能的话，首选纯HTML5和CSSS。如果没有其他方法可以实现这一点，一些jQuery是可以的。

希望这个屏幕截图有助于理解我想要实现的目标。加载视频并不是一个问题 - 问题是当你点击它的列表项时，如何让其他视频出现在它的位置。

编辑：添加html和css代码：

<div class="slider_wrapper">
<iframe class="slider_video" width="650" height="366" src="https://www.youtube.com/embed/w8jAm13M9Ec?autoplay=1" frameborder="0"></iframe>  
                        
<!-- start slider menu -->
<div class="slider_menu_container">
<div class="slider_menu">
<ul>
<li><a href="#">Welcome to WSD</a></li>
<li><a href="#">WSD: The B.E.S.T.</a></li>
<li><a href="#">WSD: A Bilingual Approach</a></li>
<li><a href="#">What's Up, WSD?</a></li>
<li><a href="#">Headline</a></li>
<li><a href="#">Headline</a></li>
<li><a href="#">Headline</a></li>
<li><a href="#">Headline</a></li>
</ul>
</div>
</div>
</div>

.slider_wrapper {
position: relative;
top: 0;
left: 0;
width: 934px;
background-color: #d3d3d3;
border: 1px solid #fff;
margin: 0 auto;
}

.slider_video {
margin: 10px 0 10px 10px;
padding: 0;
border: 10px solid #000;
}

.slider_menu_container {
margin: 0 auto;
margin-left: 10px;
margin-right: 10px;
width: 230px;
float: right;
}

.slider_menu {
position: relative;
margin: 0 auto;
margin-top: 10px;
margin-bottom: 5px;
}
 
.slider_menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}

.slider_menu li, .slider_menu li.first {
padding: 8px;
height: 24px;
border: 1px solid #fff;
margin-bottom: 7px;
overflow: hidden;
background-color: #207F3E;
box-shadow: 0 0 1px #303030;
}

.slider_menu li:hover, .slider_menu li.first:hover {
background: -moz-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(255,255,255,1) 100%);/* FF3.6-15 */
background: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00299a0b', endColorstr='#9dbaa6',GradientType=1 ); /* IE6-9 */
box-shadow: 0 0 1px #303030;
}
 
.slider_menu a {
text-decoration: none;
font-family: 'avenir-medium', Fallback, sans-serif;
font-weight: normal;
font-size: .9em;
color: #fff;
line-height: 24px;
vertical-align: middle;
}

.slider_menu a:hover {
color: #303030;
}

Answer 1

单靠CSS无法做到这一点，不，你需要一些JavaScript。

<li onclick="return play('w8jAm13M9Ec')">Welcome to WSD</li>

function play(clip) {
  var video = document.getElementsByTagName('iframe')[0];
  video.src = 'https://www.youtube.com/embed/'+clip+'?autoplay=1';
  return false;
}

请参阅this fiddle。

（使用jsfiddle而不是代码段，因为代码段沙盒会将YouTube视频视为不安全。）