I’ve used the uTubeFill Stack (@willwood) and Play Stack (@Doobox) to create background videos on my websites, but is there any way to make those background videos fixed? (i.e. so the video doesn’t scroll with the rest of the page content)
My client wants a Home page like this one, which has a fixed video background. It seems like there should be some CSS that will make the video fixed.
Have you looked at Joe Workman’s Eclipse Stack? This should allow you to have a fixed video background.
Hi @zeebe, Eclipse looks great. I looked at the online manual but it didn’t say anything about making the video background fixed. Also, Joe’s preview pages don’t show what Eclipse looks like when you scroll down the page.
Before I purchase it, can you confirm that Eclipse does fixed video backgrounds?
@garth I’ve just built a quick test page with the uTubeFill stack and the free Blank theme. I put a large chunk of Lorem Ipsum dummy content in the page. For me, the video was sized to fill the whole window and did not scroll (it was fixed to the top left of the browser window). However the dummy content in the page was still scrollable. So the uTubeFill stack should be feasible to use for the sort of page you want to create. Providing your chosen theme has a visible body background, it should work fine.
Hey @garth, yes, it is a fixed background, you can see it here
http://www.zeebedesigns.com/eclipse-fixed/
That is just a quick site I put together, works great.
Thanks Will and Zeebe! I’ll try it out!
@willwood, I tried the uTubeFill stack but I can’t seem to get it to work. I’m using the Foundation theme. Is it because I’m using the wrong selector? I’m using the default #pageWrapper.
@garth Probably best to contact the theme developer. I have no idea if Foundations has a #pageWrapper container. Can’t really tell from the published demo’s (the code seems different in each one). Pretty certain people have used uTubefill with that theme before.
@garth If you download the demo project from my ScrollUp stack you can see uTubeFill in action with Foundation on the last page. You can then replicate the settings. The download can be found on the Doumentation button here: http://www.bigwhiteduck.com/topbar/scrollup/
Essentially you just need to wrap your content in a CSSbox stack (or similar) to which you assign a custom class. This is then entered into uTubeFill as the selector.
TopBar and all other functionality will work just fine.
Hi @tav, your CSS Box solution worked perfectly! Thanks once again! And @willwood, thanks for making such a great stack! uTubeFill is awesome.
I know, it’s quite an old post here; I’m still trying to get utubefill stack to work with foundation of @joeworkman . I did not find out how. I guess it’s the selector #pageWrapper that I’m not familiar with. I Use Rapidweaver 8. Any help?