FLASH SALE Get 20% OFF everything using the coupon code: FLASH20 View WordPress Plugins →

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

on in Methods, Events and Scopes, JavaScript DOM
Last modified on

YouTube Video Cover
YouTube Video Cover

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