Placeholder image for a Video

index.html

<div class="video">
  <img src="http://lorempixel.com/500/281/technics/1/" data-video="https://player.vimeo.com/video/65158674?autoplay=1">
  <div class="play"><i class="icon-play icon-2x"></i></div>
</div>

placeholder-image-for-a-video.markdown

Placeholder image for a Video

Placeholder image is replaced by the YouTube or Vimeo iframe when clicked on the .play element.

A Pen by Sumon Islam on CodePen.

License.

script.js

$('.play').click(function() {
  video = '<iframe width="500" height="281" frameborder="0" src="' + $('img').attr('data-video') + '"></iframe>';
  $('.video').replaceWith(video);
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

/* External Resources: Font Awesome (icon font) https://netdna.bootstrapcdn.com/font-awesome/3.2.0/css/font-awesome.min.css  */

.video {
  position: relative;
  height: 281px;
  width: 500px;
  background: #73AF96;
  position: absolute;
}

.video img {
  opacity: .65;
}

.play {
  height: 80px;
  width: 120px;
  position: absolute;
  text-align: center;
  cursor: pointer;
  border-radius: 5px;
  /*Centering*/
  
  margin: -40px 0 0 -60px;
  left: 50%;
  top: 50%;
  display: block;
  background: #FA614D;
  transition: background-color 0.5s ease;
  color: white;
}

.play:hover {
  background: #C31A1F;
}

.icon-play {
  line-height: 80px;
}

.icon-play:before {
  cursor: pointer;
}

styles

<link href="https://netdna.bootstrapcdn.com/font-awesome/3.2.0/css/font-awesome.min.css" rel="stylesheet" />