YouTube Overlays
It's important when using an overlay on YouTube videos that the video plays immediately on the first click. This can be done using the YouTube API.
The example below is optimized for site speed and will automatically stop other videos from playing when you click on another video. You can add a video title or a custom thumbnail image if you choose or you can leave it blank to load the default.
Alternatively, you can set a default custom thumbnail (in the JS) instead of using the YouTube Thumbnail if a client wants to have all the same thumbnails for their company.
Add class="preload" to any videos above the fold.
Examples:
JavaScript
// YouTube API
function youTubeOverlay() {
var tag = document.createElement("script");
tag.src = "https://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName("script")[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubePlayerAPIReady(videoLink) {
player = new YT.Player("ytplayer-" + videoLink, {
height: "100%",
width: "100%",
videoId: videoLink,
playerVars: {
rel: 0,
controls: 0,
autoplay: 1,
showinfo: 0,
modestbranding: 1,
playsinline: 1
}
});
}
// Play YouTube OnClick
$(".video-wrapper").on("click", function(e) {
e.preventDefault();
$(".video-wrapper").removeClass('play').children('iframe').remove();
var videoLink = $(this).attr("data-video-id");
$(this).addClass("play").append(`<div id="ytplayer-${videoLink}"></div>`);
onYouTubePlayerAPIReady(videoLink);
});
// Create Thumbnail for each video
function loadThumbnails(elm) {
var videoLink = $(elm).attr("data-video-id");
var videoTitle = $(elm).attr("data-video-title");
var videoImg = $(elm).attr("data-video-img");
if (videoLink == undefined) {
if ($(elm).children("iframe").attr("src") != undefined) {
var videoLink = $(elm).children("iframe").attr("src").split("/").pop();
} else {
var videoLink = $(elm).children("iframe").attr("data-src").split("/").pop();
}
if (videoLink.includes('?')) {
videoLink = videoLink.split('?')[0]
}
$(elm).attr("data-video-id", videoLink);
$(elm).children("iframe").remove();
}
if (videoImg == undefined) {
// Load Default YouTube Thumbnail
var videoImg = `http://i3.ytimg.com/vi/${videoLink}/hqdefault.jpg`;
// Load Default Custom Thumbnail var videoImg = `/images/video-thumbnail.jpg`;
}
if ($(elm).find($('.video-thumbnail')).length < 1 ) {
$(elm).prepend(`<div class="video-thumbnail" style="background-image:url(\'${videoImg}')\"></div>`);
}
if (videoTitle != undefined && $(elm).find($('.video-title')).length < 1) {
$(elm).prepend(`<h3 class="video-title">${videoTitle}</div>`);
}
}
// Lazy YouTube Thumbnails
$(".video-wrapper").scrollfire({
onBottomIn: function (elm, distance) {
loadThumbnails($(elm))
}
});
$(".video-wrapper.preload").each(function(){
loadThumbnails($(this))
});
};
// Init YouTube Overlay Preload (above the fold)
if ($('.video-wrapper.preload').length > 0) {
youTubeOverlay();
};
// Init YouTubeOverlay on Scroll
$(".video-wrapper:not(.preload)").scrollfire({
offset: 0,
onScroll: function(elm, distance) {
if ($("script[src*='https://www.youtube.com/player_api']").length == 0) {
youTubeOverlay();
}
}
});
CSS
/* Video Wrapper Overlay */
.video-wrapper { background-color: #000; }
.video-wrapper.play::after, .video-wrapper.play::before, .video-wrapper.play .video-thumbnail, .video-wrapper.play .video-title { visibility: hidden; opacity: 0; z-index: -9; transition: 0.3s; margin: 0 !important; }
.video-wrapper .video-thumbnail { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background-repeat: no-repeat; background-size: cover; background-position: center; }
.video-wrapper .video-thumbnail::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, .4); z-index: 1; }
.video-wrapper::before { content: ""; position: absolute; top: 50%; left: 50%; z-index: 99; transform: translate(-50%, -50%); width: 68px; height: 68px; border: 3px solid #fff; border-radius: 50%; transition: 0.3s; }
.video-wrapper::after { content: ""; position: absolute; top: 50%; left: 50%; z-index: 99; transform: translate(-33%, -50%); height: 0; border-style: solid; border-width: 15px 0 15px 25px; border-color: transparent transparent transparent #ffffff; z-index: 999; }
.video-wrapper:hover::before { background: #007bff; cursor: pointer; transition: 0.3s; }
.video-wrapper:hover { cursor: pointer; }
.video-wrapper .video-title { position: absolute; z-index: 9; color: #fff; text-align: center; top: 55%; left: 15px; right: 15px; font-size: 24px; font-weight: 600; }
@media (max-width:500px) {
.video-wrapper .video-title { font-size: 18px; }
}
HTML
// Recommended
==========================================
<div class="video-wrapper" data-video-id="ScMzIvxBSi4" data-video-title="Placeholder Video 1" data-video-img="/images/emails/success.jpeg"></div>
// Works with Lazyload Iframe
==========================================
<div class="video-wrapper" data-video-img="/images/emails/learn.jpg">
<iframe class="lazyload" data-src="https://www.youtube.com/embed/eEzD-Y97ges" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
// Also works with non-lazyload Iframe ( Not recommended - YouTube videos will slow your site down dramatically! )
==========================================
<div class="video-wrapper" data-video-title="Placeholder Video 3">
<iframe src="https://www.youtube.com/embed/GaYofdN-ygk" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>