How to create a YouTube video cover using the YouTube Iframe API

There’s an increasing trend of adding full-width (possibly full-height) YouTube video covers with autoplay. Using the YouTube Iframe API, this is pretty easy to achieve.

Here’s the HTML sample code:

<div class="youtube-bg">
    <div id="player" data-id="0Icc5dPbE7E"></div>
    <h1>Do you want better SEO? More traffic? More conversions? More growth?</h1>
</div>

Here’s the basic CSS code:

.youtube-bg {
    font-family: "Poppins";
    position: relative;
    width: 100%;
    height: 600px;
    overflow: hidden;
}
.youtube-bg::before {
    content: "";
    display: block;
    background: var(--primary_color);
    background: linear-gradient(45deg, var(--primary_color_alpha) 0%, var(--secondary_color_alpha) 100%);
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
}
.youtube-bg #player {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 180%; /* Adjust this between 150% and 200% */
  min-height: 180%; /* Adjust this between 150% and 200% */
  width: auto;
  height: auto;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: -1;
}
.youtube-bg h1 {
    color: #ffffff;
    font-size: 40px;
    line-height: 1.25;
    font-weight: 400;
    text-align: center;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 48px;
}

Note the .youtube-bg #player selector has a variable minimum width and height. Adjust this based on your audience’s screen resolution. Setting it to 100% will add letter-boxing left and right. I found that 150% works best for me, especially if the video is 16:9.

Related posts