If anybody needs it, here is the script I used.
It was tricky because there was an annoying phenomena between the hover and the scroll functions. Basically while scrolling the page, the browser (Chrome especially) doesn't send any other mouse coordinates, therefore the hovered video was constantly there till the scroll was stopped.

Here is a script that avoid this problem:

<script> let hoveredElement; let mouseX = 0, mouseY = 0; document.addEventListener('DOMContentLoaded', () => { document.addEventListener('mousemove', event => { mouseX = event.clientX; mouseY = event.clientY; hover(event.target); }); document.addEventListener('scroll', () => { const hoverTarget = document.elementFromPoint(mouseX, mouseY); if (hoverTarget) { hover(hoverTarget); } }); }); function hover(targetElement) { // If the target and stored element are the same, return early // because setting it again is unnecessary. if (hoveredElement === targetElement) { return; } // On first run, `hoveredElement` is undefined. if (hoveredElement) { if (hoveredElement.hasAttribute("data-videoid")) { document.getElementById(hoveredElement.getAttribute("data-videoid")).classList.remove('hoverscrolled'); console.log(hoveredElement.getAttribute("data-videoid")); console.log(document.getElementById(hoveredElement.getAttribute("data-videoid"))); } } hoveredElement = targetElement; if (hoveredElement.hasAttribute("data-videoid")) { document.getElementById(hoveredElement.getAttribute("data-videoid")).classList.add('hoverscrolled'); console.log(hoveredElement.getAttribute("data-videoid")); console.log(document.getElementById(hoveredElement.getAttribute("data-videoid"))); } } </script>

HTML:

<div data-videoid="one_data" > </div> <video id="one_data" class="vid_background" autoplay muted loop> <source src="https://somevideo.mp4" type="video/mp4"> Your browser does not support HTML5 video. </video>

CSS:

video.vid_background{ opacity: 0; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: -5; width: 40%; position: fixed; height: 50%; -webkit-transition: none; -o-transition: none; transition: none; } video.vid_background.hoverscrolled { opacity: 1; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: -5; width: 40%; position: fixed; height: 50%; -webkit-transition: none; -o-transition: none; transition: none; }

@Johan-Saj I just tried and it also didn't worked… but thanks!!

@arminunruh cool!

@metapublishing Hi did it work for you? When I remove the current favicon it just shows the standard wordpress logo for me.

@arminunruh

https://remcovandun.nl/info/

I've updated my Info page with the collapsed subcategories for each service. Thanks, I didn't even notice the top margin jump yet. I was looking at the way the content seem to move up from the bottom if you toggle between the services was odd.

Actually... this would be solved if there was a checkbox 'close other row before opening new row'?

And to make them appear from the same top margin I had to set all the gutters for the rows after the first to 0%. Maybe not how you intended but works for me :)

@arminunruh — oh happy day! looking forward to it, with my sincere thanks in advance. :) Una

these are the image sizes that are generated:

'_265', '_512', '_768', '_1024', '_1280', '_1920', '_2560', '_3200', '_3840', '_4096'

these are the pixel widths

so 768px and so on

using the image srcset, only the correct size is loaded into the browser, based on the width of the image in the current browser and device

this is more performant than just loading the original image

so just because your uploads folder is very large it doesnt mean your website is slow when you visit it

you can disable all plugins, lay theme works without any extra plugins
but if you want to use any addons → laytheme.com click "addons" you need to keep them activated

you can send me your website url and such so i can take a look myself:

can you send your website address, /wp-admin/ username and password and a link to this topic to info@laytheme.com?

Hey Armin,
thanks for the correction.
Is the image swap on your to do list too?
Thank you

also there is this:
+more → +embed

i think you can just put a soundcloud song url in here

maybe that works too

ok maybe if it doesnt work its the wrong css mmh

mh maybe use a transition on the images themselves inside the container, not just the container

(sry dont have time to do custom css for you :/)

i think it takes some time for google to realize these links are gone

also make sure u removed any links to these pages

also google if you can find a solution
maybe a sitemap, dont know

hey so when the loop is active on carousels, the carousel will always clone html to make it have an endless loop. when the html is cloned, the image will reload so then there is a flash. nothing i can do here

@arminunruh horrible news in the morning :/. Is there a way to play the webm in chrome and a different codec in safari ? Like a hermaphrodite Video ? I also just realized that my phone isn’t interested to play the webm s as well.

for license key issues always write licensekeys@laytheme.com

hey man, you need to create a new page, design what you need in your footer and then save it. Once you've done that go to Lay Options > Footer and then activate it in there. There's more info here: https://laytheme.com/documentation/footers.html