The below should give you a decent starting point, to refine for your purposes:
Demo Fiddle
HTML
<div>
<iframe class="youtubeplayer" width="700" height="455" src="http://www.youtube.com/embed/ScfXNmDkvHo?wmode=opaque" frameborder="0" allowfullscreen></iframe>
</div>
CSS
div {
position:relative;
cursor:pointer;
width:700px;
}
div:before {
content:'';
position:absolute;
top:39%;
left:44%;
height:60px;
width:85px;
border-radius:10px;
border:1px solid #000;
text-align:center;
line-height:30px;
background:#3AA8FF;
transition:all 200ms ease-in;
}
div:after {
content:'';
position:absolute;
top:44.5%;
left:49%;
display:inline-block;
width: 0;
height: 0;
border-top: 6px solid transparent;
border-left: 12px solid #fff;
border-bottom: 6px solid transparent;
}
div:hover:before {
background:orange;
}