cAROUSEL HOVER ON AUTOPLAY DOESN'T STOP AUTOPLAY IF CAROUSEL CONTAINS VIDEOS
-
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,
-
oh yea u have youtube and vimeo videos in your carousel
since these are iframes its not possible to check if they have a mouseoverthis wont work
only way is if you would have html5 videos in your carousel instead of youtube or vimeo videos
-
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?
-
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
-
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
-
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
@jayrusselldotco hey, this might not be right for you but try adding this into css and see how it looks:
video {
object-fit: contain;
} -
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
-
This solved it. Thankyou Armin !!
-
sure! amazing videos!
I also code custom websites or custom Lay features.
šæ Email me here: šæ
info@laytheme.com
Before you post:
- When using a WordPress Cache plugin, disable it or clear your cache.
- Update Lay Theme and all Lay Theme Addons
- Disable all Plugins
- Go to Lay Options ā Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"
This often solves issues you might run into
When you post:
- Post a link to where the problem is
- Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
- If the problem is difficult to explain, post screenshots / link to a video to explain it