@Richard

I tested my website on my Huawei mate 20 lite, but I guess it's not considered as a “new device” anymore… I will try to test it on other phones. Thanks for your help!

Best! :)

@Richard

Thanks for your answer! I deactivated the “Autoplay” setting for the individual videos and now it works perfectly on desktop, but the videos don't autoplay on mobile anymore… Do you know how I could fix that?

Best,

TYLM

Hello everyone!

I'm currently using the fullscreen slider on my website, and I'd like to know if it is possible to autoplay a video BUT only when we arrive on its slide – and not when the page is loaded. Because I would like the users to watch a video from the beginning everytime they reach the video's slide.

Here's an example of one of my project with videos on some of the slides :
https://theomarielle.com/untitled-19-website/

Thanks in advance for your help!

Cheers,

TYLM

@julienfelixweb Unfortunately I didn't… ;( But I'm definitely interested if you do!

I manage to fix the problem! Apparently with multilingual websites, having every languages of your site displayed in the menu cause the “Cart” to double (if you have two languages, in my case english and french). FYI you can get around this by hiding the current langage in the menu :)

@leoncov Hey! Did you and @Richard found out a solution? Because I have the exact same problem on a website I'm designing and as I saw on your website it seems you don't have that problem anymore. I removed the cart from the mobile menu but it didn't fix the problem…

I'd really appreciate your help! :)

Cheers,

@Richard Ok I'm gonna try to find a solution for this. Thanks again for your help!

@Richard

Thanks to the links you sent me, I manage to make a custom code that works great on desktop! 🔥🙏

But it doesn't work on mobile tho… The elements don't switch back when .lay-carousel-slide-html5video has NOT is-selected as a class. Do you know what could cause that difference of behavior? It looks like when on mobile, every time I change slide, it still detects a is-selected class.

Here's my code – it may not be the cleanest code but, as I said, it works perfectly on desktop:

window.laytheme.on("newpageshown", function(layoutObj, type, obj) {
var videoSlide = jQuery(".lay-carousel").find(".lay-carousel-slide-html5video").first();

videoSlide.on("DOMAttrModified", function (e) {
    if (e.originalEvent.attrName === "class") {
        console.log("##DOMAttrModified, class changed");
        if (jQuery(this).hasClass("is-selected")) {
            console.log("##Element has 'is-selected' class, changing");
            jQuery("body").addClass('black-bg');
            jQuery(".lay-carousel-sink-parent").addClass('negative');
            jQuery(".sitetitle img").addClass('negative');
            jQuery(".mobile-title").addClass('negative');
            jQuery("._Menu").addClass('negative');
            jQuery(".flickity-prev-next-button").addClass('negative');
            jQuery(".lay-mobile-icons-wrap").addClass('negative');
        }else{
            jQuery("body").removeClass('black-bg');
            jQuery(".lay-carousel-sink-parent").removeClass('negative');
            jQuery(".sitetitle img").removeClass('negative');
            jQuery(".mobile-title").removeClass('negative');
            jQuery("._Menu").removeClass('negative');
            jQuery(".flickity-prev-next-button").removeClass('negative');
            jQuery(".lay-mobile-icons-wrap").removeClass('negative'); 
        }
    }
});
});

Thanks again @Richard !

@Richard Thanks for your answer,

Small correction: I am using Carousels and not Fullscreen Sliders. What do you mean by “the site-title should still be targeted the same way?”?

The elements that should be targeted are: sitetitle, laynav, lay-carousel-sink-parent and flickity-prev-next-button. I would like all these elements to be white instead of black when on a video. Applying to them a class with a filter:invert(1); could be a good and simple solution in that situation I guess?

It's a website for a client, so not yet public – password protected at the moment. Can I send you the link and password in a private chat?

You'll see right away the design problem with the black elements on the video for that matter.

Hi!

I've been looking in the forum for infos on how to change the sitetitle & menu color on a fullscreen carousel slide displaying a video and not an image. I've got both slides with image and slides with videos in my carousels. But the lisibilty of the black nav is “damaged” on some videos…

I would like to simply invert my nav and title from black to white. But I don't know how to target only slides with html5 video and how to bind a click event every time I change slide with the navigation arrows.

I hope my explanation was clear enough :)

Thanks in advance for your help and work!

Théo