Cursors and scroll on Vimeo Videos / Carousel add-on

[Richard]

Dear @marc

Using navigation outside of the Carousel such as arrows or circles is not an option for you?
I can understand if this is not with your design. 🌝

---

Best

Richard

[marc]

Hi Richard,
Haha the idea would to have full images besides the screen..
If the cursors are not available, maybe keep the scrolling would be the best solution

[Richard]

Dear Marc

@marc

The difficulty is just how 'Iframes' work. They are essentially windows of another website or HTML block. When the cursor exists over them, then their rules apply and also their navigation applies.

Hope that makes sense, and we can wait for Armin's input as Lay Theme's creator 🌝

---

best

Richard

[marc]

I understand! Let's see if Armin have a solution or something!
Thank you!!

[marc]

Hi,

When I resized the page and went back to the original size of the page to test responsive, videos did this action :

So, maybe the idea would be to let a space under videos to create a space to scroll/use cursors.

Maybe you have the solution to resize videos on carousel and finally have this space under them ?

Thanks a lot,
Marc

[Richard]

Dear @marc

Interesting, This is surely a Bug but may have lead to a solution? 🌝
I created these tests, the resizing bug occurs with "show multiple slides" the first carousel with and the second without :

https://rickei3.dreamhosters.com/carousel-vimeo-bug/

I have forwarded this Behaviour to Armin as well ✅

Are you able to share your Carousel settings, i think i got pretty close:

If this solution (bug) works for you then we could try some custom CSS to make the vimeo video smaller, let me know.

Thank you for find the bug a well! ⭐️

---

talk soon

Richard

[marc]

Hey Richard!

Indeed I thing the bug could be the solution! The idea is to create a zone to suggest the scroll and cursor outside the iframe vimeo!

Here are the Carousel settings:

I continue to try things in the css to have this result

Appreciate your help!
Thanksss

[marc]

Ok so I found an other way,
http://marcthomas.fr/versace-spring-summer-22-watches-campaign/
Carousel new options:

Like this there is a zone under videos.
The only little concern is that they are a little bit small, when I go in the css I change the value of this slide like this

But when I create this :

.lay-carousel-slide swiper-slide lay-carousel-slide-video is-selected {
    width: calc(70%);
}

It doesn't take the custom css

Otherwise it's not a big concern but always good to fix little details !! ;-))

[Richard]

Dear @marc

Amazing 💥

Your code is good and close but a few things:

.lay-carousel-slide swiper-slide lay-carousel-slide-video is-selected {
    width: calc(70%);
}

If these are all classes they all need to be declared as classes with an . if they are ID's then they are declared with # :

.lay-carousel-slide .swiper-slide .lay-carousel-slide-video .is-selected {
    width: calc(70%);
}

With CSS if there is a 'space' between these classes that is saying they are "children" of the "Parent" and its a heirachy (nested, like russian dolls)

.Grandparent .parent .child .grandchild

If the classes are part of the same element and not in a hierarchy then they have no space to signify this e.g:

.sibling.sibling.sibling.sibling

So the above code would become:

.lay-carousel-slide.swiper-slide.lay-carousel-slide-video.is-selected {
    width: calc(70%);
}

You had the width correct but if using the Calc function you must complete it e.g

width: calc(70% - 10%);

If not using a calculation then you can just use the normal width and declare a width. The use of !important is to override Lay Theme's native css . Note: !important should be used sparingly.

.lay-carousel-slide.swiper-slide.lay-carousel-slide-video.is-selected {
    width:70% !important;
}

The last thing is that the CSS applies to the slide with the class is-selected so its great when it's the one in centre view but it loses that class when you move down the carousel and therefore loses the CSS associated with it:

We already have .lay-carousel-slide-video to signify its a video so that should do:

.lay-carousel-slide.swiper-slide.lay-carousel-slide-video {
    width:70% !important;
}

Hope this helps Marc, Versace images looking great and have a wonderful day 🌝

---

Best

Richard

[marc]

Hi Richard,

It works!! Thanks for your time and your patience!!

Have a nice day!
Marc

[Richard]

Thanks @marc have a great day too! 👍