Tips & Tricks: Custom Thumbnails for Video Embeds

.png)

Tired of default thumbnails that don’t do your video justice?
In this quick video, I’ll walk you through how to use a little HTML, CSS, and JavaScript to set a custom thumbnail for a Synthesia video embedded via iframe. Don’t worry, I’ve included a template for you at the end of the post—no previous coding experience required!

Here’s the custom thumbnail template:

<div style="position:relative;overflow:hidden;aspect-ratio:1920/1080">
  <div style="position:absolute;aspect-ratio:1920/1080;width:100%">
    <div class="poster">
    <!-- 1. replace the text below (EMBED) with the embed code for your video -->
    <!-- 2. remove the div tags that surround the iframe -->
    <!-- 3. add this property to the iframe: id="my-video" -->
    <!-- 4. add this property to the iframe: poster="URL" -->
    <!-- 5. replace URL in poster="URL" with the URL for your thumbnail -->
      EMBED
    </div>
  </div>
</div>
<script>
  const poster = document.querySelector(".poster");
  poster.addEventListener("click", removePoster);

function removePoster() {
    poster.classList.add("poster-active");
    document.querySelector("#my-video").src += "?autoplay=1";
  }
</script>
<style>
  .poster {
    position: relative;
    display: inline-flex;
    aspect-ratio: 1920 / 1080;
    width: 100%;
  }

.poster::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: url('URL'); /* replace URL with the URL for your thumbnail */
    background-size: cover;
    transition: 1s ease;
    opacity: 1;
    cursor: pointer;
    border-radius: 12px;
  }

.poster-active:after {
    opacity: 0;
    pointer-events: none;
  }
</style>