JSFiddle - React, Tailwind, and code Playground

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%;
	
	/*
	margin-left: -35px;
	margin-top: -35px;
	*/
}

.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;
}