getButterfly
Resume

NAVIGATION

ATTRIBUTION

getButterfly
Dublin, Ireland

All Content Copyright ©2019
getButterfly

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

Do you want better SEO? More traffic? More conversions? More growth? We help companies exponentially grow their traffic and conversions, while outranking their competitors. With more than 10 years of experience, we’ve learned what is valuable to our clients.
SEO Dublin | SEO Malta

Related Articles

My Battle Tested Recommendations
Disclaimer: These recommendations contain affiliate links.

Jetpack
Dreamhost
WordPress.com
CodeCanyon
SEMrush
SEMrush

Privacy Policy