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

Follow me!

If you like this article, go ahead and follow me on Twitter:

Follow @getButterfly

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. Last modified on Wednesday, May 13, 2020.

Contribute!

Contribute to this article by sharing your opinion on Twitter:

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