Optimized YouTube Embed Code Generator

YouTube allows you to easily embed any YouTube video into a web page on your site, however this involves using iframes, and YouTube runs some heavy scripts and external resources are needed from YouTube directly. This causes slower page load which sometimes appears in speed test results as possible improvements that can be made to speed your site up.

We have developed a custom embed code, so instead of chucking in iframes that connect straight to YouTube and call in scripts and other unnecessary data, we instead embed just the preview image onto your web page, if the user wants to play the video and they click the “play” button, the small script you embed into your site will then replace the image with YouTubes iframe player as you would do originally with an auto-play. As far as the user knows, the experience is completely the same. But you save a tremendous amount of resources being included on page load.

All you need to do is embed our custom JavaScript into your HEAD tag and our CSS rules in your CSS file.

Setup Instructions

Please make sure you add the following CSS and JavaScript to your site on any pages that will be using the embed code generated above, else it will not work.

Add the following JavaScript code anywhere on your site:

//youtube video code - can be added to head or in the footer or in an external JS file.
document.addEventListener("DOMContentLoaded",
function() {
var div, n,
v = document.getElementsByClassName("youtube-player");
for (n = 0; n < v.length; n++) {
v[n].onclick = labnolIframe;
}
});

function labnolIframe() {
var iframe = document.createElement("iframe");
var embed = "https://www.youtube.com/embed/ID?autoplay=1";
iframe.setAttribute("src", embed.replace("ID", this.dataset.id) + this.dataset.ido);
iframe.setAttribute("frameborder", "0");
iframe.setAttribute("allowfullscreen", "1");
this.append(iframe);
}

Add the following CSS to your CSS file:

.iframeresponsive {
    font-size: 0;
}
.youtube-player {
    position: relative;
    overflow: hidden;
    max-width: 100%;
    background: #000;
    margin: 0;
    height: 100%;
}
.youtube-player img:hover {
    filter: brightness(75%);
}
.youtube-player img {
    bottom: 0;
    display: block;
    left: 0;
    margin: auto;
    max-width: 100%;
    width: 100%;
    position: absolute;
    right: 0;
    top: 0;
    border: none;
    height: auto;
    cursor: pointer;
    transition: .4s all;
}
.youtube-player iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    background: transparent;
}
.youtube-player .play {
    height: 72px;
    width: 72px;
    left: 50%;
    top: 50%;
    margin-left: -36px;
    margin-top: -36px;
    position: absolute;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAAAzCAYAAAA0CE5FAAAACXBIWXMAAAsTAAALEwEAmpwYAAAGtmlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDIgNzkuMTYwOTI0LCAyMDE3LzA3LzEzLTAxOjA2OjM5ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgKFdpbmRvd3MpIiB4bXA6Q3JlYXRlRGF0ZT0iMjAxOC0wOC0wM1QxMjo1MDo1OCswMTowMCIgeG1wOk1vZGlmeURhdGU9IjIwMTgtMDgtMDNUMTI6NTk6MTMrMDE6MDAiIHhtcDpNZXRhZGF0YURhdGU9IjIwMTgtMDgtMDNUMTI6NTk6MTMrMDE6MDAiIGRjOmZvcm1hdD0iaW1hZ2UvcG5nIiBwaG90b3Nob3A6Q29sb3JNb2RlPSIzIiBwaG90b3Nob3A6SUNDUHJvZmlsZT0ic1JHQiBJRUM2MTk2Ni0yLjEiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MGYxZDlhYzItYzY2OS01NjQ3LThiZWMtNjk0MmM2NGQ0M2Y4IiB4bXBNTTpEb2N1bWVudElEPSJhZG9iZTpkb2NpZDpwaG90b3Nob3A6YWY1ZTY2OGQtZWRiNS1hYTQzLTkyYjctYTBjOTJiZDE4Zjg1IiB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6MGFkNTA2NjUtMWRjMi0zYTRjLWI1NjItYjlhMjBlNGYyZDAxIj4gPHhtcE1NOkhpc3Rvcnk+IDxyZGY6U2VxPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0iY3JlYXRlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDowYWQ1MDY2NS0xZGMyLTNhNGMtYjU2Mi1iOWEyMGU0ZjJkMDEiIHN0RXZ0OndoZW49IjIwMTgtMDgtMDNUMTI6NTA6NTgrMDE6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCBDQyAoV2luZG93cykiLz4gPHJkZjpsaSBzdEV2dDphY3Rpb249InNhdmVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOjhjOGE0NTY0LTdmYTItY2Q0Ny1hNjAzLTZjNjgzMWY0NGYyZCIgc3RFdnQ6d2hlbj0iMjAxOC0wOC0wM1QxMjo1OToxMyswMTowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0ic2F2ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6MGYxZDlhYzItYzY2OS01NjQ3LThiZWMtNjk0MmM2NGQ0M2Y4IiBzdEV2dDp3aGVuPSIyMDE4LTA4LTAzVDEyOjU5OjEzKzAxOjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgKFdpbmRvd3MpIiBzdEV2dDpjaGFuZ2VkPSIvIi8+IDwvcmRmOlNlcT4gPC94bXBNTTpIaXN0b3J5PiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pm79JJEAAAeCSURBVGgF7cFbjNx1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) no-repeat;
    filter: grayscale(100%);
    cursor: pointer;
}
.youtube-player .play:hover {
    filter: grayscale(0%);
}