单击 <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 视频视为不安全的。）

单击 <li> 项以播放 youtube 视频

Clicking on <li> items to play youtube videos

html

css

youtube

video

playlist