Has anyone had any experience of having a looping background video appear in either a page header or a block?
It's something I'd like to try and do for a course, ideally as part of the page header. On the face of it, I'd have thought it just a matter of creating the appropriate custom CSS classes. But I wanted to see if anyone had any previous experience of doing this to share. (And whether it's a good or bad idea!)
Thanks
Hi Gareth,
Maybe you can try this: open boxmenu.hbs with your html editor and add new html
<video width="100%" autoplay loop>
<source src="http://d27shkkua6xyjc.cloudfront.net/videos/maaemo-film-2.mp4?mtime=201411131854315" type="video/mp4">
</video>
Hi Gareth, you can see a example of an implementation for blocks: adapt-backgroundVideo
Thanks for the helpful pointers.
I had some initial success getting a basic video header working in the page header, using this tutorial for reference. Essentially I just added the relevant HTML to the page header template, and a tweaked version of the styles in my Less.
I would prefer to do something that was a bit more usable/configurable in the Authoring Tool - so it seems to me that a block extension like Ignacio's would be the way to go for this. (I guess I'd remove the page header from my overall theme and create a 'hero-image' type block that can be placed at the top of the page.) But not sure if this would introduce anything unexpected?
An important thing for my project would be to ensure this works on mobile. I gather this probably means the video should be replaced with an image on devices below a certain size.
The closest reference point I can find for how to do this in a Block element are in the couple of background switcher plugins that seem to be kicking around. Will give it a go and report back!
https://github.com/cgkineo/adapt-background-switcher/blob/master/less/background-switcher.less
https://github.com/mike-st/parallax-background-switcher/blob/master/less/background-switcher.less
In case it's of interest to anyone ... I've got as far as creating a branch of Ignacio's plugin, and updated so that the user can decide if they want a mobile fallback image. If they do, the image selected as a poster frame will be used.
https://github.com/darloboy101/adapt-backgroundVideo/tree/develop
In a modified theme, I've then created a class that applies display: none to the page header, and positions the background video block I've created to the top of the page.
Yet to comprehensively test.