Hi @arminunruh ,
thank you again for your effort und time you spend in soling individual problems.
I also just saw your reply on my post. In the meantime I found some work arounds.
for
Video auto playback
I just use the h264 codec instead of VP-9 despite the bigger file size. At least for now its fine, but I would appreciate a fix for VP-9 :)
But with both codecs the placeholder image does not get loaded when Video is used inside a Carousel.
I used this code created by Gemini. So please don't judge me, if it's bad code, but it works for my specific use case. But still thought: sharing is caring :D
I think it's very fragile and not very flexible, but for know works :D
Custom CSS Desktop
html, body, a, button, input, .lay-overlay {
cursor: none !important;
}
/* Carousel "Hand" Killer */
html body .lay-carousel,
html body .lay-carousel a,
html body .lay-carousel img,
html body .lay-carousel span,
html body .lay-carousel .col {
cursor: none !important;
}
html body .lay-carousel a:hover,
html body .lay-carousel img:hover {
cursor: none !important;
}
/* ================================================= */
/* 4. DER CUSTOM CURSOR */
/* ================================================= */
#custom-cursor {
z-index: 2147483647 !important;
position: fixed;
top: 0; left: 0;
width: 20px; height: 20px;
background-color: white;
border-radius: 50%;
pointer-events: none;
transform: translate(-50%, -50%);
transition: width 0.2s ease, height 0.2s ease, background-color 0.2s ease;
will-change: transform, width, height;
/* STANDARD: Normal (Weißer Punkt) */
mix-blend-mode: normal !important;
}
/* ================================================= */
/* 5. CURSOR AUF WEISSEN SEITEN (Und Overlay) */
/* ================================================= */
/* Wenn .is-white-page aktiv ist ODER das Overlay offen ist -> Exclusion */
body.is-white-page #custom-cursor,
body.lay-overlay-open #custom-cursor {
mix-blend-mode: exclusion !important;
}
/* ================================================= */
/* 6. TEXT-FARBEN FIX (AUF WEISSEN SEITEN) */
/* ================================================= */
/* Alles auf Schwarz zwingen, wenn .is-white-page aktiv ist */
body.is-white-page .sitetitle,
body.is-white-page .sitetitle *,
body.is-white-page nav.lay-nav a,
body.is-white-page nav.lay-nav span,
body.is-white-page .laynav-element,
body.is-white-page .laynav-position-top-right a,
body.is-white-page .mobile-title,
body.is-white-page .mobile-title * {
color: #000000 !important;
opacity: 1 !important;
fill: #000000 !important;
stroke: #000000 !important;
mix-blend-mode: normal !important;
}
/* ================================================= */
/* 7. CAPTION FIX BEI OVERLAY */
/* ================================================= */
.lay-overlay {
z-index: 2147483600 !important;
background-color: white !important;
}
body.lay-overlay-open .caption-animator,
body.lay-overlay-open .caption-wrapper {
visibility: hidden !important;
opacity: 0 !important;
z-index: -1 !important;
}
/* ================================================= */
/* 8. CURSOR HOVER ZUSTÄNDE */
/* ================================================= */
/* A) Bild Hover (Thumbnail) -> Rot */
#custom-cursor.hovered-image {
width: 40px;
height: 40px;
background-color: rgb(255, 0, 0) !important;
mix-blend-mode: normal !important;
opacity: 0.9;
}
/* B) Text Link Hover -> Rot/Exclusion */
#custom-cursor.hovered-text {
width: 40px;
height: 40px;
background-color: rgb(255, 0, 0) !important;
mix-blend-mode: exclusion !important;
}
/* C) BACK BUTTON HOVER (Ganz unten -> Höchste Prio) */
body #custom-cursor.hovered-btn {
width: 40px !important;
height: 40px !important;
background-color: white !important;
opacity: 1 !important;
mix-blend-mode: exclusion !important;
}
Custom HTML at bottom
<script>
(function() {
var cursor = document.getElementById("custom-cursor");
var cursorX = -100;
var cursorY = -100;
// 1. Performance-Bewegung
document.addEventListener("mousemove", function(e) {
cursorX = e.clientX;
cursorY = e.clientY;
});
function loop() {
if(cursorX > 0) {
cursor.style.transform = 'translate3d(' + (cursorX - cursor.offsetWidth/2) + 'px, ' + (cursorY - cursor.offsetHeight/2) + 'px, 0)';
}
requestAnimationFrame(loop);
}
loop();
// 2. Hover Listener Logik
function addHoverListeners() {
var imageTargets = document.querySelectorAll(".lay-carousel-slide a, #custom-back-btn, .custom-overlay-close-icon, .overlay-close");
imageTargets.forEach(function(el) {
el.removeEventListener("mouseenter", onImageEnter);
el.removeEventListener("mouseleave", onImageLeave);
el.addEventListener("mouseenter", onImageEnter);
el.addEventListener("mouseleave", onImageLeave);
});
var textTargets = document.querySelectorAll("a:not(.lay-carousel-slide a), .lay-nav a, .sitetitle a, .pointer, button, .clickable, .lay-overlay a");
textTargets.forEach(function(el) {
if(el.querySelector('img')) return;
el.removeEventListener("mouseenter", onTextEnter);
el.removeEventListener("mouseleave", onTextLeave);
el.addEventListener("mouseenter", onTextEnter);
el.addEventListener("mouseleave", onTextLeave);
});
var plainMedia = document.querySelectorAll(".lay-carousel img, .lay-carousel video");
plainMedia.forEach(function(el) {
if(el.closest('a')) return;
el.removeEventListener("mouseenter", onPlainMediaEnter);
el.removeEventListener("mouseleave", onPlainMediaLeave);
el.addEventListener("mouseenter", onPlainMediaEnter);
el.addEventListener("mouseleave", onPlainMediaLeave);
});
setTimeout(checkInitialState, 100);
}
function checkInitialState() {
if(cursorX <= 0) return;
var el = document.elementFromPoint(cursorX, cursorY);
if(!el) return;
if ( (el.tagName === 'IMG' || el.tagName === 'VIDEO') && el.closest('.lay-carousel') && !el.closest('a') ) {
onPlainMediaEnter();
}
}
function onImageEnter() { cursor.classList.add("hovered-image"); cursor.classList.remove("hovered-text", "no-blend"); }
function onImageLeave() { cursor.classList.remove("hovered-image"); }
function onTextEnter() { cursor.classList.add("hovered-text"); cursor.classList.remove("hovered-image", "no-blend"); }
function onTextLeave() { cursor.classList.remove("hovered-text"); }
function onPlainMediaEnter() { cursor.classList.add("no-blend"); }
function onPlainMediaLeave() { cursor.classList.remove("no-blend"); }
addHoverListeners();
window.laytheme.on("newpageshown", function() {
cursor.classList.remove("hovered-image", "hovered-text", "no-blend");
setTimeout(addHoverListeners, 200);
});
setTimeout(addHoverListeners, 1000);
})();
</script>
Also Gemini'ed a solution for the function, also don't know if its really flexible but works for my website layout fine.
CSS Desktop
/* ================================================= */
/* 9. CUSTOM BACK BUTTON */
/* ================================================= */
#custom-back-btn {
position: fixed;
bottom: 25px;
left: 20px;
width: auto !important;
height: 30px;
z-index: 2147483500 !important;
display: none;
line-height: 0;
cursor: none !important;
mix-blend-mode: normal !important;
}
#custom-back-btn img {
height: 100% !important;
width: auto !important;
display: block;
filter: none !important;
}
/* Back Button Invertieren (Nur auf weißen Seiten) */
body.is-white-page #custom-back-btn img {
filter: invert(1) !important;
opacity: 1 !important;
}
body.is-white-page #custom-back-btn {
mix-blend-mode: normal !important;
filter: none !important;
}
HTML at Bottom
<div id="custom-back-btn">
<img src="https://alexboecker.de/wp-content/uploads/2026/01/pfiel-weis-links-50px-back-button.png" alt="Back">
</div>
<script>
window.laytheme.on("newpageshown", function(layoutObj, type, obj){
var backBtn = jQuery('#custom-back-btn');
var storageKey = 'alex_pos_final_v3';
var isHomePage = jQuery('body').hasClass('slug-frontpage') || window.location.pathname === '/' || window.location.pathname === '';
// --- GRÖSSE AN MENÜ ANPASSEN ---
function syncButtonSize() {
var menuLink = jQuery('.lay-nav a').first();
if(menuLink.length === 0) { menuLink = jQuery('._Headline').first(); }
if(menuLink.length > 0) {
var fontSize = menuLink.css('font-size');
backBtn.css('height', fontSize);
// console.log("Back Button Höhe angepasst auf: " + fontSize);
}
}
syncButtonSize();
jQuery(window).off('resize.btnSize').on('resize.btnSize', syncButtonSize);
// --- A) STARTSEITE LOGIK ---
if (isHomePage) {
var attempts = 0;
function waitForSwiper() {
var swiperEl = document.querySelector('.swiper-container');
if (swiperEl && swiperEl.swiper) {
initHomePageLogic(swiperEl.swiper);
} else {
attempts++;
if (attempts < 40) setTimeout(waitForSwiper, 50);
}
}
waitForSwiper();
function initHomePageLogic(swiper) {
var savedIndex = sessionStorage.getItem(storageKey);
if (savedIndex && parseInt(savedIndex) > 0) {
swiper.slideToLoop(parseInt(savedIndex), 0);
}
updateButton(swiper);
swiper.on('slideChange', function() {
sessionStorage.setItem(storageKey, swiper.realIndex);
updateButton(swiper);
});
backBtn.off('click').on('click', function() {
swiper.slideToLoop(0, 600);
sessionStorage.setItem(storageKey, 0);
setTimeout(function(){ backBtn.fadeOut(); }, 600);
});
}
function updateButton(swiper) {
if (swiper.realIndex > 0) backBtn.fadeIn();
else backBtn.fadeOut();
}
// --- B) PROJEKTSEITE LOGIK ---
} else {
backBtn.fadeIn();
backBtn.off('click').on('click', function(e) {
e.preventDefault();
window.location.href = "https://alexboecker.de/";
});
}
// --- C) SITE TITLE RESET ---
jQuery('.sitetitle, .sitetitle a, .lay-nav .sitetitle a').off('click').on('click', function(event) {
sessionStorage.setItem(storageKey, 0);
var linkTarget = jQuery(this).closest('a').attr('href');
var currentUrl = window.location.href.replace(/\/$/, "");
if (linkTarget && linkTarget.replace(/\/$/, "") === currentUrl) {
var swiperEl = document.querySelector('.swiper-container');
if (swiperEl && swiperEl.swiper) swiperEl.swiper.slideToLoop(0, 0);
}
});
});
</script>
Maybe its helping someone in the future :D
thank you, have great day!
