Clicking on <li> items to play youtube videos - css

Question

I apologize if this kind of question has been asked and answered. I tried doing a search online before asking, but have yet to find an answer that solves my situation.
I am in the process of developing a website where there's a list (using <li>) on the right of a video and if a user clicks on another item in the list, a new video will play in place of the previous video, if that makes sense.
I prefer to keep my code as clean as possible. pure HTML5 and CSSS is preferred if that's at all possible. Some jQuery is okay if there's no other way to accomplish this.
Hopefully this screenshot will help make sense of what I am trying to accomplish. Iit's not a problem to load a video - the problem is how to make other videos appear in its place when you click on its list item.
edit: adding html and css codes:
<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>Welcome to WSD</li>
<li>WSD: The B.E.S.T.</li>
<li>WSD: A Bilingual Approach</li>
<li>What's Up, WSD?</li>
<li>Headline</li>
<li>Headline</li>
<li>Headline</li>
<li>Headline</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

This can't be done with CSS alone, no, you will need some 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;
}
See this fiddle.
(Using a jsfiddle instead of a snippet, because the snippet sandbox treats YouTube videos as insecure.)