.video-wrapper{
  display:inline-block;
  position:relative;
  width:600px;
  height:400px;
  overflow:hidden;
  background-color:#000;
  border-radius:10px;
  box-shadow:0 10px 80px rgba(0,0,0,.13);

}
.video-wrapper.youtube-video {
  padding-bottom: 56.25%;
  height:auto;
}
.video-wrapper.youtube-video iframe{
  border:none;
  position: absolute;
  top: 0;
  left: 0;
}
.video-wrapper .overlay{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,.30);
  z-index:1;
}
.video-wrapper .preview-image{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:0;
}
.video-wrapper #video {
  width:100%;
  height:100%;
}
.video-wrapper .video-action{
  position:absolute;
  display:block;
  top:50%;
  left:50%;
  margin-top:-40px;
  margin-left:-40px;
  width:80px;
  height:80px;
  z-index:2;
  box-shadow:0 3px 6px rgba(0,0,0,.13);
  border-radius:50%;
  overflow:hidden;
  cursor:pointer;
  transition: opacity .180s ease, transform .200s ease;
}
.video-wrapper .video-action:hover{
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -o-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
}
.video-wrapper .pause-button{
  display:none;
  opacity:0;
}
@media only screen and (max-width: 1140px) {
  .video-wrapper{
    width:100%;
  }
}