This is some test content over here in the main column. Resize the page, and see how the video play button resizes consistently. You may need to customize the background-size values to suit your needs. This has been tested in IE8+, and the latest versions of Firefox, Chrome, and Safari. IE8 doesn't get the background-size values, but it's good enough.

HTML

<div class="videos">
    <a href="https://www.youtube.com/watch?v=F5FEj9U-CJM" class="video">
        <span></span>
        <img src="https://i1.ytimg.com/vi/F5FEj9U-CJM/maxresdefault.jpg" alt="True Facts About The Mantis Shrimp" />
    </a>
</div>

CSS

.videos img {
  width:100%;
  height:auto;
}
a.video {
  float: left;
  position: relative;
}
a.video span {
  width: 100%;
  height: 100%;
  position: absolute;
  background: url("../path-to-your-image/play-btn.png") no-repeat;
  background-position: 50% 50%;
  background-size: 300%;
}
@media screen and (max-width: 480px) {
  a.video span {
    background-size: 400%;
  }
}