{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
f:format.raw()}>
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()}
{containerPre -> f:format.raw()} {row.renderedContent -> f:format.raw()} {containerPost -> f:format.raw()}
{row.renderedContent -> f:format.raw()}
{row.renderedContent -> f:format.raw()}