Create a responsive video play button overlay

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 Font Awesome to create a CSS play button. I’ve also created an SVG play button version for an additional approach. Or just keep reading for techniques 2 & 3 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.

This post originally appeared on douglasgreen.com. If you are reading it on another website, please view the original article.

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">
    <a href="http://example.com/">
      <div class="play-btn"></div>
      <img class="placeholder" src="../path-to-your-image/poster-frame.jpg" alt="My Awesome Video" />
    </a>
  </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: color, background-color .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.

Technique 3 (SVG play button)

Perhaps an easier way of adding a play button icon is to use an SVG play button. You don’t have to load a third-party font library which will reduce your load time. With SVG, you have freedom to create whatever graphic you want, and you can easily change the color with the ‘fill’ property. For this demo, we are using the same absolute positioning technique. The CSS code follows, as well as a link to the demo where you can grab the SVG code.

    /* 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 poster frame or placeholder image */
    .video-wrap .placeholder {
      max-width: 700px;
      width: 100%;
    }
    /* SVG play button container */
    .video-wrap .play-btn {
      position: absolute;
      max-width: 700px;
      width: 100px;
      height: 100px;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
    .video-wrap .play-btn svg {
      transition: all .2s ease;
      fill: #fff;
    }
    .video-wrap .play-btn:hover svg,
    .video-wrap .play-btn:focus svg {
      cursor: pointer;
      fill: #17e617;
    }
    /* adjust your icon size, add different breakpoints as needed */
    @media screen and (max-width: 600px) {
      .video-wrap .play-btn {
        width: 70px;
        height: 70px;
      }
    }

Here’s a demo of the SVG play button method: SVG play button demo.