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.
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)
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.
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.
Thanks for the project file
Thx for the project :-)
Several years later…
@habitualshaker this looks like the perfect solution, and the stack group was copied to my project, linked video, playing perfectly. As soon as I added the CSS all failed. Removing the class wrapper s-dark-bg did not reveal the video. Now a little out of my depth, I was hoping Container Plus would support video, but seemingly not.
Is there an easier way with grids etc? I need an mp4 playing in the background with text overlaid - I have virtually all of your stacks and Jannis’ too
Thanks for any suggestions ☺️
Hi @Nick - I can’t tell what might be wrong just from your description. Does the demo file work for you as it should? if so then there is probably just something that has been missed when you transferred the segment to your own setting.
The s-dark-bg just acts as an overlay to darken the video. if the video was working you would see it through the overlay.
Thanks both - back after a London day yesterday. I’ll strip the section back and paste in the original components from the demo project, stage by stage.
@Gianluca yes, that code is in place
Up and running beautifully, but there is a small BUT… is there any way of making the video responsive please? It is fine on desktop, not so great on mobile.
As a heads up to anyone interested, @habitualshaker 's ideas were impeccable (as always). Somehow there was corruption in the page and when I started afresh, everything ‘just worked’.
Hi Nick - the video is just set to fill the available space so you can control how things appear on different devices by specifying how the container it is in operates at the different breakpoints. Does that do what you need?
That should do it , thank you. On phones though, it appears to crop, not shrink. I’m spoilt after using still images as backgrounds in your amazing Container plus stacks. I’ll head to the Workbook in a mo…
Thank you!
Hi Stuart, is it possible to make the Video fixed in the Background, and all the site content scrolling above it? Any help is very much appreciated.
Hi - I am just on my phone so can’t properly check but looking at the screenshot of the css (in one of the posts above) I think you would just need to change position: absolute to position: fixed
