cAROUSEL HOVER ON AUTOPLAY DOESN'T STOP AUTOPLAY IF CAROUSEL CONTAINS VIDEOS

[jayrusselldotco]

Hey,

A small thing but I am trying to have my carousel autoplay as it is the homepage of my site. I have decided to include some videos inside this autoplay carousel. With the thinking if you want to watch more of the video you hover over to click play and it pauses the autoplay feature. However in practice clicking play on any video causes the autoplay to initialise and takes you straight out of the video.

site is www.jayrussell.co.uk

any help appreciated !

Thanks,

[arminunruh]

oh yea u have youtube and vimeo videos in your carousel
since these are iframes its not possible to check if they have a mouseover

this wont work

only way is if you would have html5 videos in your carousel instead of youtube or vimeo videos

[jayrusselldotco]

Got it. I have now replaced these with HTML5 videos. Only annoyance is the carousel seems to fix the videos to being 16:9. Two of mine are closer to 4:3. I have tried alot of ways to change this. This html worked but would effect all videos styling. I tried more simpler approaches with simple CSS but couldn't get that to work.

<script>
function fixVideoSlides() {
document.querySelectorAll('.lay-carousel-slide-html5video video').forEach(video => {
video.removeAttribute('data-w');
video.removeAttribute('data-h');
video.removeAttribute('data-ar');
video.style.removeProperty('aspect-ratio');
});

document.querySelectorAll('.lay-carousel-slide-html5video .ph').forEach(ph => {
  ph.style.paddingBottom = '0';
});

}

window.addEventListener('DOMContentLoaded', fixVideoSlides);
window.laytheme?.on('newpageshown', () => {
setTimeout(fixVideoSlides, 200);
});
</script>

Any tips?

[arminunruh]

sometimes wordpress does not recognize the aspect ratio of a video correctly. i coded a way into lay theme to set the size by hand.

pls go to your media library
click on a video, then click on "edit more details":

then enter the correct dimensions of the video here and click save

[jayrusselldotco]

Hey Armin,

I had a look at this but the dimension in the media library are correct.

It doesn't seem to recognize this inside the carousel for some reason

[alasdair17]

@jayrusselldotco hey, this might not be right for you but try adding this into css and see how it looks:

video {
object-fit: contain;
}

[arminunruh]

great idea @alasdair17

ok @jayrusselldotco
i changed something in the code that could resolve the issue.
could you update lay theme now please and then check again?
( this fix needed a lay theme update, not a carousel update)

if you use a caching plugin can you temporarily disable it just to check it then

[jayrusselldotco]

This solved it. Thankyou Armin !!

[arminunruh]

sure! amazing videos!