VIDEO COMPONENT CMS - help with portfolio site

Hi!

I’ve got video as an option for my portfolio covers but as you can see they are not contained ~

read only Webflow - Rachel's NEW SITE 2024

I would love any help with being able to align the videos to the actual dimensions of the content blocks if that is at all possible?

Many thanks!

The videos seem to be contained… did you resolve the problem already?

Hi!

No, the motion assets themselves are still being cut off.
Only a piece of the videos are showing.

Any help would be deeply appreciated!

Ah okay, I see.

You just have to change the sizing and the object-fit of the class .project-video.
Here are the settings you need:

And if you want to contain the whole video without any cropping you can change Fit from “cover” to “contain”.

dang and my dev said this wasn’t possible, can’t thank you enough!!!

Hahah then maybe we can call ourselves Devs now :wink:

1 Like

I have one more question, I’ve set this up so that when one clicks on certain content blocks it doesn’t open into a project but just enlarges the work image/video. My dev built it so that it opens as full screen for the video components but I’d like it to do what the image enlarge does (vs going full screen).

For example, you can see this when clicking the “It’s Your Lymph” podcast vs one of the videos.

Do you perhaps know how to do this too?

(let me know if this makes any sense :sweat_smile:)

I think I understand what you mean :slight_smile:

Thats quite simple.
You just have to copy the styling from the image element to the video element.

To do so, go to the element with the class “.project-modal_cover” and look at its styling-settings. This is the image-element with the “enlarge” setting you were referring to.

Now you can just copy those settings to the video element, so that the sizing-settings and the border-radius (further down in the style-panel) are identical.
Here in the screenshot I have not pasted in the settings yet.

Do this for all breakpoints of the element.
That should be it.

Thank you @Schuschi_Eyes this is quite literally amazing. My dev isn’t coming to me with these answers…apparently it’s not doable!

Before I play around with this I got my last round of edits back from the guy I am working with and my site on publish is no longer responsive. :melting_face:

Do you have any idea what’s going on!?

Hey @theillustratrice
Do you mean by “not responsive” that you cannot click on anything?
If so, you just have to go into your Cursor component and set pointer-events to none:

But besides that I just looked into it and there are multiple things that seem weird to me… The whole section with the collection list has some weird settings that break the opening and closing function of the projects (at least for the projects that should enlarge when you click on them). Is this intentional?

@Schuschi_Eyes yes thank god ok wonderful I can click on stuff again, thank you!!

I think that has to do with the request I had of being able to set some case studies to opening to a project page that is moire flushed out with the project specs whereas others just zoomed in on an image. But now that I can click again I can see the “enlarge” categorized ones aren’t working.

Is there something you spotted in there that’s blocking this?

@Schuschi_Eyes hey, sorry for the double ping! I’ve been trying to get my dev to close this loop but he’s having trouble tracking down what’s going wrong here on the “enlarge” interaction cases.

If there’s any insight you have here this would be super helpful :pray: