JSFiddle - React, Tailwind, and code Playground

by Alireza Safian

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js"></script>
<div class="container">
  <div class="row">
    <div class="col-sm-6">

      <div class="video_thumbnail">
        <img src="http://placehold.it/600x400" alt="" class="img-responsive">
        <span class="play-btn"></span>
      </div>

    </div>
    <div class="col-sm-6">

      <div class="video_thumbnail">
        <img src="http://placehold.it/600x400" alt="" class="img-responsive">
        <span class="play-btn"></span>
      </div>
    </div>

  </div>
</div>

CSS

.video_thumbnail {
  border: 1px solid red;
  position: relative;
}

.video_thumbnail:hover {
  cursor: pointer;
}

.video_thumbnail .play-btn {
  background: white;
  background: blue;
  display: inline-block;
  padding: 25px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.video_thumbnail .play-btn:after {
  content: "";
  display: block;
  position: relative;
  left: 2px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 0 10px 20px;
  border-color: transparent transparent transparent white;
}