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

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 :/)