点击 <li> 项目播放 youtube 视频答案

【问题标题】：Clicking on <li> items to play youtube videos点击 <li> 项目播放 youtube 视频
【发布时间】：2016-02-12 19:49:25
【问题描述】：

如果有人提出并回答了此类问题，我深表歉意。我在询问之前尝试在线搜索，但尚未找到解决我情况的答案。

我正在开发一个网站，其中视频右侧有一个列表（使用<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;
}

【问题讨论】：

能否发下相关代码。
完成 - 编辑帖子。谢谢。
是的，这是一个错误。我已经改变了。

标签： css html video youtube playlist

【解决方案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 而不是 sn-p，因为 sn-p 沙盒将 YouTube 视频视为不安全的。）

【讨论】：