Background videos in Source

Hey @habitualshaker, if one wanted to have a background video in Source, what would be the best way to do it (either via Source if there’s an option I’m missing or a recommended 3rd party stack).

As an example, lets say replacing the main image at the top of this page: https://demo.shakingthehabitual.com/sth/source/freelancer/ with a background video.

Hi @jabostick - I’ve got a project file that shows how to do this with code in Source but cannot seem to locate it. Was sure i had shared it on here before but i guess not. Will post it here if i can find it.

Easiest way in any case is just to use BWD’s Sections Pro.

1 Like

Perfect, thanks!

I’ve just put together a new example for those that might want to do this purely in Source. It is a fairly simple thing to do with a couple of Coder stacks and just a little code.

Here is a published example and here is the project file.

(Have also add this to the Source Knowledge Base)

3 Likes

Thanks Boss!

This is probably amateur hour but - in the css: there’s a top and left set to 50%. I assume that is to focus on the center of the video horizontally and vertically?
And then there’s a transform: translate(-50%, -50%)what does that impact?

yes exactly. it’s a way to centre the video within the parent coder stack.

the top and left 50% values put the top left corner of the video at the center point and the translate then adjusts it so that the center point of the video is in the middle.

2 Likes

If using object-fit then the browser provides a built in function to do this in object-position: 50% 50% analogous to the background-position for images.

3 Likes

Thanks for the project file

Thx for the project :-)