Description
- gallery block grid video but make text/overlay color on hover + make full video slide up on item click
- view demo – password: abc
- buy me a coffee
#1. Install Code
#1.1. Make sure you use Gallery Block Grid + enable “Show Title”
#1.2. Add Video (Youtube/Vimeo)
Note: code will get text from Video + This Title field only.
It can’t get Description text here
#1.3. Hover on top right of section (where you added Gallery Block Grid) > Click EDIT SECTION
at Design > Anchor Link > enter word: gb-video
#1.4. Hover on Page where you use Gallery Block Grid > Click Gear icon
Click Advanced > Paste this code
- If you use Personal/Basic Plan and your plan doesn’t support Injection, see #3.1
<!-- 06.26c19v3 Gallery Block Grid Video -->
<script>
window.GBVideoConfig = {
sectionSelector: 'section[id*="gb-video"]',
gallerySelector: '.sqs-gallery.sqs-gallery-design-grid',
containerSelector: '.sqs-gallery-container',
playerBlockId: 'gb-video-player-block',
scrollPadding: 80,
metaBackgroundColor: 'rgba(0, 21, 173, 0.85)',
titleFontSize: '18px',
descriptionFontSize: '14px',
closeIconSize: '20px',
closeIconColor: '#ffffff'
};
</script>
<script>
(function () {
if (typeof window.EPPZScrollTo === 'undefined') {
window.EPPZScrollTo =
{
documentVerticalScrollPosition: function ()
{
if (self.pageYOffset) return self.pageYOffset;
if (document.documentElement && document.documentElement.scrollTop) return document.documentElement.scrollTop;
if (document.body.scrollTop) return document.body.scrollTop;
return 0;
},
viewportHeight: function ()
{ return (document.compatMode === "CSS1Compat") ? document.documentElement.clientHeight : document.body.clientHeight; },
documentHeight: function ()
{ return (document.height !== undefined) ? document.height : document.body.offsetHeight; },
documentMaximumScrollPosition: function ()
{ return this.documentHeight() - this.viewportHeight(); },
elementVerticalClientPositionById: function (id)
{
var element = document.getElementById(id);
var rectangle = element.getBoundingClientRect();
return rectangle.top;
},
scrollVerticalTickToPosition: function (currentPosition, targetPosition)
{
var filter = 0.2;
var fps = 60;
var difference = parseFloat(targetPosition) - parseFloat(currentPosition);
var arrived = (Math.abs(difference) <= 0.5);
if (arrived)
{
scrollTo(0.0, targetPosition);
return;
}
currentPosition = (parseFloat(currentPosition) * (1.0 - filter)) + (parseFloat(targetPosition) * filter);
scrollTo(0.0, Math.round(currentPosition));
setTimeout("EPPZScrollTo.scrollVerticalTickToPosition(" + currentPosition + ", " + targetPosition + ")", (1000 / fps));
},
scrollVerticalToElementById: function (id, padding)
{
var element = document.getElementById(id);
if (element == null)
{
console.warn('Cannot find element with id \'' + id + '\'.');
return;
}
var targetPosition = this.documentVerticalScrollPosition() + this.elementVerticalClientPositionById(id) - padding;
var currentPosition = this.documentVerticalScrollPosition();
var maximumScrollPosition = this.documentMaximumScrollPosition();
if (targetPosition > maximumScrollPosition) targetPosition = maximumScrollPosition;
this.scrollVerticalTickToPosition(currentPosition, targetPosition);
}
};
}
function initGBVideo(section) {
if (section.dataset.gbVideoDone === 'true') return;
var config = window.GBVideoConfig;
if (!config) return;
var S = config.sectionSelector;
var galleryContainer = section.querySelector(config.containerSelector);
var gallery = section.querySelector(config.gallerySelector);
if (!galleryContainer || !gallery) return;
section.dataset.gbVideoDone = 'true';
var style = document.createElement('style');
style.textContent =
S + ' .sqs-gallery-design-grid-slide .margin-wrapper {' +
'position: relative;' +
'}' +
S + ' .image-slide-meta {' +
'display: flex;' +
'justify-content: center;' +
'align-items: center;' +
'flex-direction: column;' +
'text-align: center;' +
'position: absolute;' +
'top: 0;' +
'left: 0;' +
'width: 100%;' +
'height: 100%;' +
'background-color: ' + config.metaBackgroundColor + ';' +
'cursor: pointer;' +
'opacity: 0;' +
'visibility: hidden;' +
'transition: opacity 0.3s ease;' +
'z-index: 2;' +
'}' +
S + ' .slide:hover .image-slide-meta {' +
'opacity: 1;' +
'visibility: visible;' +
'}' +
S + ' .image-slide-meta-title {' +
'color: #fff;' +
'margin: 0 0 8px 0;' +
'padding: 0 10px;' +
'font-size: ' + config.titleFontSize + ';' +
'}' +
S + ' .image-slide-meta .image-slide-title {' +
'color: #fff;' +
'margin: 0;' +
'padding: 0 10px;' +
'white-space: initial !important;' +
'font-size: ' + config.descriptionFontSize + ';' +
'}' +
S + ' .gb-video-player-block {' +
'position: relative;' +
'width: 100%;' +
'margin-bottom: 20px;' +
'padding-top: 40px;' +
'display: none;' +
'}' +
S + ' .gb-video-player-inner {' +
'position: relative;' +
'width: 100%;' +
'padding-bottom: 56.25%;' +
'background: #000;' +
'}' +
S + ' .gb-video-player-inner iframe {' +
'position: absolute;' +
'top: 0;' +
'left: 0;' +
'width: 100%;' +
'height: 100%;' +
'border: 0;' +
'}' +
S + ' .slb-close {' +
'position: absolute;' +
'top: 0;' +
'right: 0;' +
'background: transparent;' +
'border: 0;' +
'cursor: pointer;' +
'display: flex;' +
'align-items: center;' +
'justify-content: center;' +
'padding: 8px;' +
'z-index: 3;' +
'}';
document.head.appendChild(style);
var slides = gallery.querySelectorAll('.slide[data-type="video"]');
var parser = new DOMParser();
slides.forEach(function (slide) {
if (slide.dataset.gbMetaDone === 'true') return;
var videoWrapper = slide.querySelector('.sqs-video-wrapper');
var titleEl = slide.querySelector('.image-slide-title');
if (!videoWrapper) return;
var dataHtml = videoWrapper.getAttribute('data-html') || '';
var parsedDoc = parser.parseFromString(dataHtml, 'text/html');
var parsedIframe = parsedDoc.querySelector('iframe');
var titleText = parsedIframe ? (parsedIframe.getAttribute('title') || '') : '';
var meta = document.createElement('div');
meta.className = 'image-slide-meta';
if (titleText) {
var heading = document.createElement('h4');
heading.className = 'image-slide-meta-title';
heading.textContent = titleText;
meta.appendChild(heading);
}
if (titleEl) {
meta.appendChild(titleEl);
}
var contentWrapper = slide.querySelector('.content-wrapper');
var insertParent = contentWrapper ? contentWrapper.parentNode : videoWrapper.parentNode;
insertParent.appendChild(meta);
meta.dataset.dataHtml = dataHtml;
slide.dataset.gbMetaDone = 'true';
});
var playerBlock = document.createElement('div');
playerBlock.className = 'gb-video-player-block';
playerBlock.id = config.playerBlockId;
var closeButton = document.createElement('button');
closeButton.className = 'slb-close';
closeButton.id = 'slbClose';
closeButton.innerHTML =
'<svg id="slbCloseSvg" viewBox="0 0 40 40" stroke-width="1.5" style="width: ' + config.closeIconSize +
'; height: ' + config.closeIconSize + '; stroke: ' + config.closeIconColor +
';"><path d="M4.3,35.7L35.7,4.3"></path><path d="M4.3,4.3l31.4,31.4"></path></svg>';
var playerInner = document.createElement('div');
playerInner.className = 'gb-video-player-inner';
playerBlock.appendChild(closeButton);
playerBlock.appendChild(playerInner);
var blockContent = galleryContainer.parentNode;
blockContent.insertBefore(playerBlock, galleryContainer);
var srcParser = new DOMParser();
function extractSrcFromDataHtml(dataHtml) {
var parsedDoc = srcParser.parseFromString(dataHtml, 'text/html');
var parsedIframe = parsedDoc.querySelector('iframe');
if (!parsedIframe) return null;
var src = parsedIframe.getAttribute('src');
if (!src) return null;
if (src.indexOf('//') === 0) src = 'https:' + src;
var separator = src.indexOf('?') === -1 ? '?' : '&';
src += separator + 'autoplay=1&mute=1';
return src;
}
function openPlayerWithDataHtml(dataHtml) {
var src = extractSrcFromDataHtml(dataHtml);
if (!src) return;
playerInner.innerHTML = '';
var iframe = document.createElement('iframe');
iframe.src = src;
iframe.setAttribute('allow', 'autoplay; fullscreen; picture-in-picture; clipboard-write; encrypted-media; web-share');
iframe.setAttribute('allowfullscreen', '');
iframe.setAttribute('frameborder', '0');
iframe.setAttribute('referrerpolicy', 'strict-origin-when-cross-origin');
playerInner.appendChild(iframe);
playerBlock.style.display = 'block';
EPPZScrollTo.scrollVerticalToElementById(config.playerBlockId, config.scrollPadding);
}
function closePlayer() {
playerInner.innerHTML = '';
playerBlock.style.display = 'none';
}
closeButton.addEventListener('click', function (e) {
e.preventDefault();
closePlayer();
});
var metas = gallery.querySelectorAll('.image-slide-meta');
metas.forEach(function (meta) {
meta.addEventListener('click', function () {
var dataHtml = meta.dataset.dataHtml || '';
openPlayerWithDataHtml(dataHtml);
});
});
}
function attemptInitAll() {
var config = window.GBVideoConfig;
if (!config) return false;
var sections = document.querySelectorAll(config.sectionSelector);
if (!sections.length) return false;
var pending = 0;
sections.forEach(function (section) {
if (section.dataset.gbVideoDone === 'true') return;
var container = section.querySelector(config.containerSelector);
var gallery = section.querySelector(config.gallerySelector);
var slides = gallery ? gallery.querySelectorAll('.slide[data-type="video"]') : null;
if (container && gallery && slides && slides.length) {
initGBVideo(section);
} else {
pending++;
}
});
return pending === 0;
}
var pollTimer = null;
function startPolling() {
if (attemptInitAll()) return;
if (pollTimer) clearInterval(pollTimer);
var attempts = 0;
var maxAttempts = 60;
pollTimer = setInterval(function () {
attempts++;
if (attemptInitAll() || attempts >= maxAttempts) {
clearInterval(pollTimer);
pollTimer = null;
}
}, 150);
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', startPolling);
} else {
startPolling();
}
window.addEventListener('load', startPolling);
window.addEventListener('mercury:load', startPolling);
})();
</script>
<style>
button#slbClose {
background-color: #000;
}
</style>
#2. Customize
#2.1. To change overlay color over video, change Line 09
metaBackgroundColor: 'rgba(0, 21, 173, 0.85)',
#2.2. To change Title, Description size, change Line 09, Line 10
titleFontSize: '18px', descriptionFontSize: '14px',
#2.3. To change Close icon size/color, change Line 11, Line 12
closeIconSize: '20px', closeIconColor: '#ffffff'
#2.4. To change black background behind X icon, change Line 366
background-color: #000;
#3. Other
#3.1. If you use Personal/Basic Plan and your plan doesn’t support Injection, you can add a Block under Gallery Block
Add a Markdown Block
Paste this code into Markdown Block
<script>
window.GBVideoConfig = {
sectionSelector: 'section[id*="gb-video"]',
gallerySelector: '.sqs-gallery.sqs-gallery-design-grid',
containerSelector: '.sqs-gallery-container',
playerBlockId: 'gb-video-player-block',
scrollPadding: 80,
metaBackgroundColor: 'rgba(0, 21, 173, 0.85)',
titleFontSize: '18px',
descriptionFontSize: '14px',
closeIconSize: '20px',
closeIconColor: '#ffffff'
};
</script>
<script>
(function () {
if (typeof window.EPPZScrollTo === 'undefined') {
window.EPPZScrollTo =
{
documentVerticalScrollPosition: function ()
{
if (self.pageYOffset) return self.pageYOffset;
if (document.documentElement && document.documentElement.scrollTop) return document.documentElement.scrollTop;
if (document.body.scrollTop) return document.body.scrollTop;
return 0;
},
viewportHeight: function ()
{ return (document.compatMode === "CSS1Compat") ? document.documentElement.clientHeight : document.body.clientHeight; },
documentHeight: function ()
{ return (document.height !== undefined) ? document.height : document.body.offsetHeight; },
documentMaximumScrollPosition: function ()
{ return this.documentHeight() - this.viewportHeight(); },
elementVerticalClientPositionById: function (id)
{
var element = document.getElementById(id);
var rectangle = element.getBoundingClientRect();
return rectangle.top;
},
scrollVerticalTickToPosition: function (currentPosition, targetPosition)
{
var filter = 0.2;
var fps = 60;
var difference = parseFloat(targetPosition) - parseFloat(currentPosition);
var arrived = (Math.abs(difference) <= 0.5);
if (arrived)
{
scrollTo(0.0, targetPosition);
return;
}
currentPosition = (parseFloat(currentPosition) * (1.0 - filter)) + (parseFloat(targetPosition) * filter);
scrollTo(0.0, Math.round(currentPosition));
setTimeout("EPPZScrollTo.scrollVerticalTickToPosition(" + currentPosition + ", " + targetPosition + ")", (1000 / fps));
},
scrollVerticalToElementById: function (id, padding)
{
var element = document.getElementById(id);
if (element == null)
{
console.warn('Cannot find element with id \'' + id + '\'.');
return;
}
var targetPosition = this.documentVerticalScrollPosition() + this.elementVerticalClientPositionById(id) - padding;
var currentPosition = this.documentVerticalScrollPosition();
var maximumScrollPosition = this.documentMaximumScrollPosition();
if (targetPosition > maximumScrollPosition) targetPosition = maximumScrollPosition;
this.scrollVerticalTickToPosition(currentPosition, targetPosition);
}
};
}
function initGBVideo(section) {
if (section.dataset.gbVideoDone === 'true') return;
var config = window.GBVideoConfig;
if (!config) return;
var S = config.sectionSelector;
var galleryContainer = section.querySelector(config.containerSelector);
var gallery = section.querySelector(config.gallerySelector);
if (!galleryContainer || !gallery) return;
section.dataset.gbVideoDone = 'true';
var style = document.createElement('style');
style.textContent =
S + ' .sqs-gallery-design-grid-slide .margin-wrapper {' +
'position: relative;' +
'}' +
S + ' .image-slide-meta {' +
'display: flex;' +
'justify-content: center;' +
'align-items: center;' +
'flex-direction: column;' +
'text-align: center;' +
'position: absolute;' +
'top: 0;' +
'left: 0;' +
'width: 100%;' +
'height: 100%;' +
'background-color: ' + config.metaBackgroundColor + ';' +
'cursor: pointer;' +
'opacity: 0;' +
'visibility: hidden;' +
'transition: opacity 0.3s ease;' +
'z-index: 2;' +
'}' +
S + ' .slide:hover .image-slide-meta {' +
'opacity: 1;' +
'visibility: visible;' +
'}' +
S + ' .image-slide-meta-title {' +
'color: #fff;' +
'margin: 0 0 8px 0;' +
'padding: 0 10px;' +
'font-size: ' + config.titleFontSize + ';' +
'}' +
S + ' .image-slide-meta .image-slide-title {' +
'color: #fff;' +
'margin: 0;' +
'padding: 0 10px;' +
'white-space: initial !important;' +
'font-size: ' + config.descriptionFontSize + ';' +
'}' +
S + ' .gb-video-player-block {' +
'position: relative;' +
'width: 100%;' +
'margin-bottom: 20px;' +
'padding-top: 40px;' +
'display: none;' +
'}' +
S + ' .gb-video-player-inner {' +
'position: relative;' +
'width: 100%;' +
'padding-bottom: 56.25%;' +
'background: #000;' +
'}' +
S + ' .gb-video-player-inner iframe {' +
'position: absolute;' +
'top: 0;' +
'left: 0;' +
'width: 100%;' +
'height: 100%;' +
'border: 0;' +
'}' +
S + ' .slb-close {' +
'position: absolute;' +
'top: 0;' +
'right: 0;' +
'background: transparent;' +
'border: 0;' +
'cursor: pointer;' +
'display: flex;' +
'align-items: center;' +
'justify-content: center;' +
'padding: 8px;' +
'z-index: 3;' +
'}';
document.head.appendChild(style);
var slides = gallery.querySelectorAll('.slide[data-type="video"]');
var parser = new DOMParser();
slides.forEach(function (slide) {
if (slide.dataset.gbMetaDone === 'true') return;
var videoWrapper = slide.querySelector('.sqs-video-wrapper');
var titleEl = slide.querySelector('.image-slide-title');
if (!videoWrapper) return;
var dataHtml = videoWrapper.getAttribute('data-html') || '';
var parsedDoc = parser.parseFromString(dataHtml, 'text/html');
var parsedIframe = parsedDoc.querySelector('iframe');
var titleText = parsedIframe ? (parsedIframe.getAttribute('title') || '') : '';
var meta = document.createElement('div');
meta.className = 'image-slide-meta';
if (titleText) {
var heading = document.createElement('h4');
heading.className = 'image-slide-meta-title';
heading.textContent = titleText;
meta.appendChild(heading);
}
if (titleEl) {
meta.appendChild(titleEl);
}
var contentWrapper = slide.querySelector('.content-wrapper');
var insertParent = contentWrapper ? contentWrapper.parentNode : videoWrapper.parentNode;
insertParent.appendChild(meta);
meta.dataset.dataHtml = dataHtml;
slide.dataset.gbMetaDone = 'true';
});
var playerBlock = document.createElement('div');
playerBlock.className = 'gb-video-player-block';
playerBlock.id = config.playerBlockId;
var closeButton = document.createElement('button');
closeButton.className = 'slb-close';
closeButton.id = 'slbClose';
closeButton.innerHTML =
'<svg id="slbCloseSvg" viewBox="0 0 40 40" stroke-width="1.5" style="width: ' + config.closeIconSize +
'; height: ' + config.closeIconSize + '; stroke: ' + config.closeIconColor +
';"><path d="M4.3,35.7L35.7,4.3"></path><path d="M4.3,4.3l31.4,31.4"></path></svg>';
var playerInner = document.createElement('div');
playerInner.className = 'gb-video-player-inner';
playerBlock.appendChild(closeButton);
playerBlock.appendChild(playerInner);
var blockContent = galleryContainer.parentNode;
blockContent.insertBefore(playerBlock, galleryContainer);
var srcParser = new DOMParser();
function extractSrcFromDataHtml(dataHtml) {
var parsedDoc = srcParser.parseFromString(dataHtml, 'text/html');
var parsedIframe = parsedDoc.querySelector('iframe');
if (!parsedIframe) return null;
var src = parsedIframe.getAttribute('src');
if (!src) return null;
if (src.indexOf('//') === 0) src = 'https:' + src;
var separator = src.indexOf('?') === -1 ? '?' : '&';
src += separator + 'autoplay=1&mute=1';
return src;
}
function openPlayerWithDataHtml(dataHtml) {
var src = extractSrcFromDataHtml(dataHtml);
if (!src) return;
playerInner.innerHTML = '';
var iframe = document.createElement('iframe');
iframe.src = src;
iframe.setAttribute('allow', 'autoplay; fullscreen; picture-in-picture; clipboard-write; encrypted-media; web-share');
iframe.setAttribute('allowfullscreen', '');
iframe.setAttribute('frameborder', '0');
iframe.setAttribute('referrerpolicy', 'strict-origin-when-cross-origin');
playerInner.appendChild(iframe);
playerBlock.style.display = 'block';
EPPZScrollTo.scrollVerticalToElementById(config.playerBlockId, config.scrollPadding);
}
function closePlayer() {
playerInner.innerHTML = '';
playerBlock.style.display = 'none';
}
closeButton.addEventListener('click', function (e) {
e.preventDefault();
closePlayer();
});
var metas = gallery.querySelectorAll('.image-slide-meta');
metas.forEach(function (meta) {
meta.addEventListener('click', function () {
var dataHtml = meta.dataset.dataHtml || '';
openPlayerWithDataHtml(dataHtml);
});
});
}
function attemptInitAll() {
var config = window.GBVideoConfig;
if (!config) return false;
var sections = document.querySelectorAll(config.sectionSelector);
if (!sections.length) return false;
var pending = 0;
sections.forEach(function (section) {
if (section.dataset.gbVideoDone === 'true') return;
var container = section.querySelector(config.containerSelector);
var gallery = section.querySelector(config.gallerySelector);
var slides = gallery ? gallery.querySelectorAll('.slide[data-type="video"]') : null;
if (container && gallery && slides && slides.length) {
initGBVideo(section);
} else {
pending++;
}
});
return pending === 0;
}
var pollTimer = null;
function startPolling() {
if (attemptInitAll()) return;
if (pollTimer) clearInterval(pollTimer);
var attempts = 0;
var maxAttempts = 60;
pollTimer = setInterval(function () {
attempts++;
if (attemptInitAll() || attempts >= maxAttempts) {
clearInterval(pollTimer);
pollTimer = null;
}
}, 150);
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', startPolling);
} else {
startPolling();
}
window.addEventListener('load', startPolling);
window.addEventListener('mercury:load', startPolling);
})();
</script>
<style>
button#slbClose {
background-color: #000;
}
</style>
