Update: It’s been a while since this was posted, and techniques have changed! The original method still works fine. But if you want to skip the background image and use an icon font instead, check out this version that uses a Font Awesome to create CSS play button. I’ve also created a demo using Bootstrap to test how it works in a grid. Or just keep reading for technique 2 below.

A project I’m working on now involves redesigning an existing site, and converting it to a responsive design using the Bootstrap framework. One part of the home page has a list of video thumbnail images. We wanted to overlay a play button icon on the image to give an indication of what will happen when a user clicks on a thumbnail. This is pretty simple when you have a fixed size image, but it gets a little trickier with responsive images. The trick to making it work was adding a float to the containing element.

Technique 1 (original method)

Use an absolutely positioned span element with a background image of the play button. The background image needs to have some transparency as it will appear over your video thumbnail. Change the background size property to adjust the size of the play button at various mobile and desktop breakpoints.


<div class="videos">
  <a href="https://example.com/" class="video">
    <span></span>
    <img src="../path-to-your-image/video-poster-frame.jpg" alt="My Awesome Video" />
  </a>
</div>

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

Here’s a demo with source code: responsive video play button demo.

Technique 2 (icon font)

Use Font Awesome (or another icon font set) to display a play button over your video thumbnail. This has the advantage of being resolution-independent. The play button icon will be crisp and sharp regardless of the device resolution. As with the original method, the play button holder will be absolutely positioned. Use the ::after or ::before pseudo-element selectors to display the play button icon.


<div class="videos">
  <div class="video-wrap">
    <div class="play-btn"></div>
    <img class="placeholder" src="../path-to-your-image/poster-frame.jpg" alt="My Awesome Video" />
  </div>
</div>

/* Just a parent container for the videos */
.videos {
  margin: 20px auto;
  max-width: 700px;
}
/* Individual video container */
.video-wrap {
  position: relative;
  max-width: 700px;
  width: 100%;
  margin-bottom: 10px;
}
.video-wrap .placeholder {
  max-width: 700px;
  width: 100%;
}
.video-wrap .play-btn {
  position: absolute;
  max-width: 700px;
  width: 100px;
  height: 100px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  line-height: 1; /* needed if using Bootstrap */
  text-align: center;
  color: #eaeaea;
  background-color: rgba(255,255,255,.4);
  border-radius: 50px;
  transition: all .2s ease;
}
.video-wrap .play-btn:hover,
.video-wrap .play-btn:focus {
  color: #000;
  background-color: rgba(255,255,255,.8);
  cursor: pointer;
}
.play-btn::after {
  /*
  Font Awesome recommends these styles
  https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements
  */
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  /*
  Define the font family, weight, and icon
  */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 60px;
  content: "\f04b";
  /* positioning tweaks */
  padding-top: 20px;
  padding-left: 10px;
}

Here’s a demo of the icon font method: CSS icon font play button demo.