{containerPre -> f:format.raw()}
{containerPost -> f:format.raw()}
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
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-{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}, videoElement );
{localVideo.inlineCSS -> 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()}