HTML5-video - autoplay

by Ea Bangalore

HTML

<div class="video-player-wrapper">
  <span class="close-button">x</span>
  <video autobuffer controls autoplay>
    <source id="mp4" src="http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4" type="video/mp4" autoplay>
  </video>  
</div>

CSS

.video-player-wrapper{
    width:420px;
    background:black;
    position:relative;
    height:230px;
  }
 .close-button {
    position: absolute;
    right: -37px;
    color: #626161b8;
    top: -17px;
    font-size: 26px;
    width: 39px;
    height: 39px;
    background: #f0f3f4;
    border-radius: 50%;
    cursor: pointer;
    border: 1px solid #1e1d1d17;
}
.active-audio-video-play{
    color: #2a2a879e;
    font-size: 18px;
 }
 .audio-video .video,.audio-video .audio{position: relative;}
 span.audio:hover::before,span.video:hover::before {
    content: "";
    left: -10px;
    width: 34px;
    height: 34px;
    background: #b9b4b457;
    position: absolute;
    border-radius: 50%;
    top: -9px;
}
.close-button:hover {
    background: #e0dcdc;
    color: #333;
 }



video {
    width: 400px; 
    display: block;
   height:225px;
}