Unwanted Opacity Change in Video Carousel

Hello,

The video carousel I’m using throughout my site is reducing the opacity of each video by 50% when I advance the slider. I can’t find any interactions, hover states or opacity transitions that could be triggering this interaction.

Can anyone see what I’m missing?

Thanks,

CB


Here is my site Read-Only:

https://preview.webflow.com/preview/jcb-portfolio?utm_medium=preview_link&utm_source=designer&utm_content=jcb-portfolio&preview=cfd744529ab42ad1fe000ff54d3f3848&workflow=preview

Here is my published site w/ one of the carousels:

We would need one of those.

Sorry about that. Here it is:

Read Only: Webflow - JCB Portfolio

Published: Airbnb Originals | Christian Baker Portfolio

@JCB - If you are talking about .carousel-videos then know that Webflow is leveraging Embedly and those videos are in and IFRAME, as such you can’t manipulate the properties and note that if a video is being played and the user moves forward the video continues to play. Also means all the slide videos are being loaded by the browser which = bloat.

If this was my project I would ditch Webflow’s slider, instead I would use a more supportable slider like swiper.js and abandon using Embedly all together for HTML5 video with custom code. That would provide a much better experience for users.

1 Like

hi @JCB I think you can check this interaction :man_shrugging: You have 2 states

  1. Carousel - in view 3 - opacity = 1
  2. Carousel - out of view 2 - opacity: 0.35

Nice catch @Stan, I was looking at the source, never bothered to review the IX2. Shame on me.

1 Like

Yeh, have been confused with @JCB note

So I have first looked to DOM search for custom code on site, then find what element is actually changing etc. etc. it took me a while to get back to read only and check interactions. :crazy_face:

@Stan Thanks for looking at this. I added those interactions after I posted the issue and it appears to have fixed the problem.

@webdev The bloat problem is real, so I’ll swap for swiper.js. Thanks for the heads-up.

1 Like