Compression on video playback when in a hover state

Why are the videos much more compressed with a hide/show interaction?

The client makes videos. So when hovering over a project thumbnail they need a short video loop. And this has to be done through their end on the CMS. So, background videos don’t seem like an option since they can’t be done in the CMS, correct?

My workaround was to externally host videos on Vimeo. I created an HTML container to playback the videos allowing them to input the Vimeo video number into a form field in the CMS.

There is a big issue here with the quality in the playback that seems to stem from having the videos playing on hover versus during page load.

One idea is to change the interaction from show/hide the video to hide/show the still (sitting above the video). The only issue I have here is on the homepage where I have 4 items of text which then show hover previews of each respective video category. And they want to be able to control these over time so they are added in the CMS.

View the compression on the hover issue here: Video Tests

Homepage: https://mad-ruk.webflow.io/

On the homepage, you can see the functionality I mentioned above with the 4 text categories needing to show the hover video here:

[Webflow - Mad Ruk](https://Read-Only Link)

Here is what I think is happening,
Your element is lets say 100px and vimeo is downloading it to fit that, then you enlarge it to fill the screen.
Just an idea. If I am right let me know, cheers.

Edit
Yes I am right in a way, on the embed, RESET the fit cover to defaults and bingo.

For those that are reading, you might be interested in Pagespeed Insights consultancy service I provide, if so PM me.

HI @iDATUS. Thanks for reaching out.

The embed for the first video (w/ no hover to show/hide) and the second video (hover to show/hide) both have the fit to cover and there is no issue on quality of the first video on my test page.

I tried what you mentioned here, switching the fit to Fill, then None, but they didn’t have any affect on the quality of playback. The other options don’t fill the full page width & height.

In the HTML code block, I have the following:

<iframe src="https://player.vimeo.com/video/548240531?background=1" width="100%" height="100%" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>

Width & Height are set to 100%. I tried switching this to VH/VW but the video rendered very small.

Any other ideas here?

The version you had posted had lots of resizing as well as the fit cover.
I see now they have all gone but if you see the picture below where I add the option back to fit cover you will see what you are dealing with.


When you had all the other options on, removing that fit = cover the quality was same if not almost the same as the others via preview mode in webflow.

@iDATUS I had the first and second originally set as follows:

W - 130VW
H - 100%

This was in an attempt to have the HTML embed video fill like the native webflow background videos since the fit to cover as 100% W, 100% H left the negative space on top of the video since the video (1920x1080) was only going to 100% width.

But this is how it looks in the first video ‘Vimeo HTML Embed’ and it looks fine.

Thanks for putting it back.
Ok, I understand my result now.
If I load your share and hover it looks bad, if I press the reset it looks great.
If I go back to preview it looks bad again.
If I change back to cover it looks great.

So changing it in the designer at least forces a full size download for preview but go out of preview and back in, changing nothing its back to poor mode.

Ok you have a hover on and a hover out on the show video doing the same thing.

I deleted every other video section so I just have


with just hover on, and looks great.

Try doing the same and see if you get the same results.

@iDATUS Thanks much for your help. I see what you’re saying there and was able to replicate it as you shared for a single video.

My actual case use is with 4 videos.
User hovers over button > respective video appears.

I did a handful of other tests here. It looks like the only solution I found was to ensure that the videos display: block on page load in instances where I need more than a single video to display within the same container.

I placed a black div over the top of the two videos.
On hover, the black div opacity goes from 100 > 0%.
Show (Display: block) video tied to the button.
Hide (Display: none) alternative video.

This also worked fine with either regular HTML embed or with using the CMS (like I needed to in this case).

You can see it here: Video Tests Two Videos Alternating

Appreciate your help here. And if anyone else runs into this issue, it does get the job done for now.


https://preview.webflow.com/preview/mad-ruk?utm_medium=preview_link&utm_source=designer&utm_content=mad-ruk&preview=aa4ff3bee29cd3d3db009125f6127559&pageId=60bb3acf3288c5ee266cd3da&workflow=preview

Loads of fun, not.
The only thing that is different is that the video does not start at the start

Actually thinking about it, if only hide and show causes an issue why not just use opacity?
You can set the opacity on the element to 0% and then use integrations to set default 0%.

Sorry if I am missing the point.

Hi @brettscreativestudio sorry that I’m stepping into your discussion but you have IMHO bigger problem you should solve first. Video is streaming all the time even when visually looks that is static. Beside video also play even when is out of view. Both issues can be solved with JS.

https://cln.sh/ztQCWQ

Yeah, that’s a good idea. I didn’t think about using opacity on the HTML code blocks!

Hi Stan - Thanks so much for sharing this. On the homepage, where I have these videos autoplaying there are 4 videos total. I’m not a developer so I’m unsure how to implement the JS on the site.

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.