{containerPre -> f:format.raw()}
{containerPost -> f:format.raw()}
// YouTube Background embed - BackgroundWrapper.html
function t3sbBackgroundVideo(div, params) {
var iframe = document.createElement('iframe');
iframe.setAttribute('src','https://www.youtube-nocookie.com/embed/' + div.dataset.id + params);
iframe.setAttribute('allowfullscreen', '1');
iframe.setAttribute('allow','accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture');
div.replaceWith(iframe);
}
Youtube video
// YouTube background embeds (v{data.uid}) - BackgroundWrapper.html
var playerElement = document.getElementById('v{data.uid}');
var videoId = '{videoId}';
var div = document.createElement('div');
var params = '{youtubeParams-> f:format.raw()}';
div.setAttribute('data-id', videoId);
playerElement.appendChild(div);
t3sbBackgroundVideo(div, params);
#v{data.uid} iframe {
top: {ytVideo.ytshift}% !important;
}
// Autoheight for backgroundimages - BackgroundWrapper.html
function t3sbAddHeight(TYPO3, objKey) {
var overlay = document.getElementById(objKey).nextElementSibling;
if (overlay) {
var totalHeight = 0;
var addHeight = 0;
var claimsArray = Object.entries(TYPO3.settings.ADDHEIGHT);
claimsArray.forEach(function (item, index) {
addHeight = parseInt(item[1]);
});
if ( overlay.querySelector('.container') ) {
Array.from(overlay.getElementsByClassName('container')[0].children).forEach( bgwContent => {
totalHeight = bgwContent.clientHeight;
});
totalHeight = totalHeight + addHeight;
document.getElementById(objKey).style.minHeight = totalHeight+'px';
} else {
totalHeight = overlay.children[0].children[0].clientHeight;
totalHeight = totalHeight + addHeight;
document.getElementById(objKey).style.minHeight = totalHeight+'px';
}
}
var mobile = false;
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
mobile = true;
}
if (mobile){
document.querySelectorAll('.background-image').forEach( bgimg => {
bgimg.classList.remove('background-fixed');
});
}
}
// Autoheight for backgroundimages - BackgroundWrapper.html
document.querySelectorAll('.enableAutoheight').forEach(function(ah) {
t3sbAddHeight(TYPO3, ah.id);
});
BG-Image : overlay and autoheight
background-image by css
f:format.raw()}>
BG-Image : default
background-image by css
No BG-Image
Vimeo video
Local video
// Local video - BackgroundWrapper.html
function t3sbLocalVideo(uid, overlay, autoplay, loop, mute, controls, videoElement) {
videoElement.muted = mute;
videoElement.loop = loop;
if (autoplay) {
videoElement.pause();
videoElement.currentTime = 0;
videoElement.play();
videoElement.setAttribute('playsinline', '');
if (controls) {
videoElement.setAttribute('controls', '');
} else {
videoElement.removeAttribute('controls');
}
}
}
// Local video-{data.uid} - BackgroundWrapper.html
var videoWrapper = document.querySelector('#video-{file.uid}'),
videoElement = document.querySelector('#video-{file.uid} video'),
marginTop = (videoElement.clientHeight - videoWrapper.clientHeight)/2,
shift = {shift},
id = {data.uid},
el = document.getElementById('s-'+id),
winWidth = window.innerWidth;
if ( winWidth < 768 ) {
el.classList.remove('ratio');
} else {
el.classList.add('ratio');
}
window.addEventListener('resize', function(event) {
resizedViewportWidth = parseFloat(getComputedStyle(document.querySelector('html'), null).width.replace("px", ""));
if ( resizedViewportWidth < 768 ) {
el.classList.remove('ratio');
} else {
el.classList.add('ratio');
}
}, true);
videoElement.style.marginTop = '-'+marginTop-shift+'px';
t3sbLocalVideo({data.uid}, {localVideo.overlayChild}, {localVideo.autoplay}, {localVideo.loop}, {localVideo.mute}, {localVideo.controls}, videoElement );
{localVideo.inlineCSS -> f:format.raw()}{ratioCalcCss -> f:format.raw()}
Real image
No media
f:format.raw()}{styleAttr -> f:format.raw()}>
{containerPre -> f:format.raw()}
{row.renderedContent -> f:format.raw()}
{containerPost -> f:format.raw()}