@arminunruh
Thanks for the quick reply

Forgot to mention, I know about click but was wondering if this could be possible with on hover feature?

So hover, yes
Click, no

pointer-events: none; unfortunately takes out the entire submenu.

thanks i think we're in email contact already

sorry dont have time to support you in this custom css

mmh have u tried? if it didnt work then it probably doesnt work

why do u need to use webm, can u convert it to h264 mp4

@Richard Just wanted to say that I just realized the Vimeo option was added to the carousel and I just wanted to say THANK YOU!

ahah. Hope you have a nice day!

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!

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