Background Video

**GK User** Fri Feb 13, 2015 4:33 pm

Some sites show a background video in the header.
Anyway to do this with Quark?

Fantastic template by the way

Thanks
John.

**GK User** Fri Feb 13, 2015 8:09 pm

Hi,
those sites uses modules for it.
I suggest to search on JED those which can do that.

**GK User** Sun Feb 15, 2015 5:06 pm

Thanks. I've taken a look and I'll give one a go

**GK User** Sun Feb 15, 2015 6:08 pm

Yes I got one but it shows a video in the whole site.
Anyone know of a module that will sit only in the header of quark?

Thanks.
John.

**GK User** Sun Feb 15, 2015 6:59 pm

Sure, for example Unite Revolution Responsive (youtube & vimeo support)

**GK User** Sun Feb 15, 2015 7:43 pm

@Johnnypict I've successfully added a background video to this template using jwplayer (http://www.jwplayer.com/). I manually added the necessary files into header.php in the layouts folder of the template files and used the existing header module. This template uses css to overlay the text and logo on the header's background image so it's quite simple to use a video instead of an image. You can see the results at http://surfoff.com/dev/. I'm quite happy with the outcome but there's still some fine tuning needed. Good Luck!

My new header module code:

Code: Select all: <div id="cam" class="live"> </div> <script type="text/javascript"> jwplayer('cam').setup({ file: 'http://example.com/path_to_video', title: 'Title', width: '100%', aspectratio: '16:9', controls: 'false', autostart: 'true' }); </script> <div class="gkPage"> <h1 data-sr="enter bottom and move 50px">Big Header Text</h1> <h2 data-sr="enter bottom and move 50px and wait .2s">Smaller Header Text</h2><a href="#" class="dark btn-border" data-sr="enter bottom and move 50px and wait .3s">Learn more</a> </div>

**GK User** Mon Feb 16, 2015 11:32 am

Hi Mike, sorry but right now I see "Error loading player: No playable sources found"

**GK User** Mon Feb 16, 2015 6:15 pm

I have put a video in the header..http://HangoutShop.com

However, I am having issues with the white and black spaces between that module and the one beneath.
Anybody know why this is occurring?
I have used the video module with two other templates without issue.

Also, I looked at Mikey's and see that his template is much different than mine. Have I failed to initiate something in the settings?
Thanks,
S.

**GK User** Tue Feb 17, 2015 5:52 am

@oscar the video currently only works on desktop/laptop with flash. Still working on html5 version for mobile. It's really difficult for streaming video.

@bayoubuzz my site is bare just using the gavick QuickStart package. The QuickStart package sets up some well polished example modules. I think that's the difference you're seeing.

**GK User** Tue Feb 17, 2015 1:52 pm

This big white block is from big top padding
Use following code and will disappear.

Code: Select all: #gkPageContent {padding-top:0; }

**GK User** Fri Nov 06, 2015 9:21 am

I'd really like to be able to do this, however I'm not seeing header.php file in quark template layouts folder - only head. Which is something else entirely.

Read https://www.gavick.com/blog/make-video- ... background however it doesn't look like header-frontpage.php is used in this template.

Tried the demo on http://surfoff.com/dev/ however for me it keeps freezing (latest firefox).

I'm using the quickstart files, on http://schonox-rapid-zm.co.uk/

Are there any new ideas on how to achieve this using a very similar method to the above tutorial?

Kind regards and thank you

**GK User** Sun Nov 08, 2015 11:01 pm

But there is: gk_quark\layouts\blocks\head.php - which is good for adding custtom code in <head> section.
Unfortunately, we do not have any guides in your topic for Joomla.
And this one from blog was for WP only.