YouTube embed with custom thumbnail

index.html

<div class="youtube-container">
    <h2>With custom image</h2>
    <div class="youtube-player" data-id="NsUWXo8M7UA" data-thumbnail="https://images.unsplash.com/photo-1574158622682-e40e69881006?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80"></div>
</div>

<div class="youtube-container">
    <h2>With Youtube Thumbnail</h2>
    <div class="youtube-player" data-id="NsUWXo8M7UA"></div>
</div>

script.js

/**
 * Get videos on load
 */
(function () {
    getVideos();
})();

/**
 * For each video player, create custom thumbnail or
 * use Youtube max resolution default thumbnail and create
 * iframe video.
 */
function getVideos() {
    let ytPlayer = document.querySelectorAll(".youtube-player");
    for (let i = 0; i < ytPlayer.length; i++) {
        let el = document.createElement("div");
        let id = ytPlayer[i].getAttribute("data-id");

        let placeholder = ytPlayer[i].getAttribute("data-thumbnail") || "";

        if (placeholder) {
            el.innerHTML = createCustomThumbnail(placeholder);
        } else {
            el.innerHTML = getYTThumbail(id);
        }

        ytPlayer[i].appendChild(el);
        el.addEventListener("click", function () {
            createIframe(ytPlayer[i], id);
        });
    }
}

/**
 * Create custom thumbnail from data-attribute provided url
 * @param {string} url
 * @return {string} The HTML containing the <img> tag
 */
function createCustomThumbnail(url) {
    return `<img class="youtube-thumbnail" src="${url}" alt="Youtube Preview" /><div class="youtube-play-btn"></div>`;
}

/**
 * Get Youtube default max resolution thumbnail
 * @param {string} id The Youtube video id
 * @return {string} The HTML containing the <img> tag
 */
function getYTThumbail(id) {
    return `<img class="youtube-thumbnail" src="//i.ytimg.com/vi_webp/${id}/maxresdefault.webp" alt="Youtube Preview"><div class="youtube-play-btn"></div>`;
}

/**
 * Create and load iframe in Youtube container
 **/
function createIframe(ytPlayer, id) {
    let iframe = document.createElement("iframe");
    iframe.setAttribute(
        "src",
        `//www.youtube.com/embed/${id}?autoplay=1&color=white&autohide=2&modestbranding=1&border=0&wmode=opaque&enablejsapi=1&showinfo=0&rel=0`
    );
    iframe.setAttribute("frameborder", "0");
    iframe.setAttribute("class", "youtube-iframe");
    ytPlayer.firstElementChild.remove();
    ytPlayer.appendChild(iframe);
}

/** The following is for use with Bootstrap modal **/

/** Pause video on modal close **/
$("#video-modal").on("hidden.bs.modal", function (e) {
    $(this).find("iframe").remove();
});

/** Pause video on modal close **/
$("#video-modal").on("show.bs.modal", function (e) {
    getVideos();
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

style.css

.youtube-container {
    display: block;
    width: 100%;
    max-width: 600px;
    margin: 30px auto;
}

.youtube-player {
    display: block;
    margin 20px auto;
    padding-bottom: 56.25%;
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 100%;
    cursor: hand;
    cursor: pointer;
    display: block;
}

img.youtube-thumbnail {
    bottom: 0;
    display: block;
    left: 0;
    margin: auto;
    max-width: 100%;
    width: 100%;
    position: absolute;
    right: 0;
    top: 0;
    height: auto;
}

div.youtube-play-btn {
    height: 72px;
    width: 72px;
    left: 50%;
    top: 50%;
    margin-left: -36px;
    margin-top: -36px;
    position: absolute;
    background: url("https://freepngimg.com/thumb/categories/1398.png") no-repeat center center;
  background-size: 72px 72px;
}

.youtube-iframe {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

youtube-embed-with-custom-thumbnail.markdown

YouTube embed with custom thumbnail

Use your own custom thumbnail or the thumbnail from YouTube when embedding a YouTube video on a page.

A Pen by Dennis Lahay on CodePen.

License.