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

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.

Find more JavaScript tutorials, code snippets and samples here or more jQuery tutorials, code snippets and samples here.

Added by Ciprian on Tuesday, July 9, 2019 in Blog, JavaScript

Unlimited Automated Page Speed Monitoring & Tracking. Completely free.
Use SpeedFactor to track your website. It’s simple, reliable, and best of all, it’s free forever.
See how real people experience the speed of your website. Then find (and fix) your web performance problems.
Get Started

Related Articles


Privacy Policy