Use a video as page background

[Nunomaio]

hi,

I want to use a video as background, and then some imagens scrolling over it. i've tried set row video background, but it doesn't work.

thanks you in advance.

best

[arminunruh]

hey do you have a link to your website where the row video background doesn't work?

[Nunomaio]

hey, yes.

http://www.nuno-maio.com/matou so this how its looking like, but i want it like this : http://www.nuno-maio.com/matou2 and then the images scrolling over it.

thanks you!

[Nunomaio]

Hey Armin, could u see it?

thanks

best,

Nuno

[arminunruh]

Hey I'm sorry that I didn't look at this earlier.

Ok so since lay theme can't do this at the moment we can do it by ourselves with custom code :).

In "Lay Options" -> "Custom CSS & HTML" -> "Custom <head> content" please enter:

<style>
.fixed-bg-video {
    position: fixed;
    width: 100%;
    height: 100vh;
    object-fit: cover;
    top: 0;
    left: 0;
    z-index: -1;
}
</style>

Now in "Custom HTML at bottom" enter:

<video class="fixed-bg-video" preload="" muted="" autoplay="" loop="">
    <source src="http://www.nuno-maio.com/wp-content/uploads/2016/10/IMG_6733.m4v" type="video/mp4">
</video>

Maybe for mobile you want to hide the video.
In "Custom CSS for Mobile Version" do:

.fixed-bg-video{
display: none;
}

[Nunomaio]

@arminunruh HEY!! it worked, thank you so much!!!

http://www.nuno-maio.com/matou

one more thing please, i only want this to happen on this page, now the video is in every page how do i make just for this one?

thank you so much!!!!! :D

Nuno

[arminunruh]

Cool! Cool art!
You can do it like this in "Lay Options" -> "Custom CSS & HTML" -> "Custom CSS for Desktop Version"

body.slug-matou .fixed-bg-video{
display: block;
}
.fixed-bg-video{
display:none;
}

I'm using css that is only for that "matou" page. Here I wrote about how to apply css only to a specific page in lay theme http://laytheme.com/documentation.html#css-based-on-current-page

[Nunomaio]

@arminunruh said:

http://laytheme.com/documentation.html#css-based-on-current-page

Thank you man!

And thank you for your help :D

[countach]

Hey @arminunruh

On this website : www.dominique-sierra.fr, I tried the custom code you gave earlier to show a video as background.

In custom CSS & HTML :

<style>
.fixed-bg-video {
position: fixed;
width: 100%;
height: 100vh;
object-fit: cover;
top: 0;
left: 0;
z-index: -1;
}
</style>

And in custom HTML at bottom

<video class="fixed-bg-video" preload="" muted="" autoplay="" loop="">
<source src="http://www.nuno-maio.com/wp-content/uploads/2016/10/IMG_6733.m4v" type="video/mp4">
</video>

The video doesn’t work on mobile version, there is just an image of the video.
Is there a way to make this work on mobile?

Thx dude, laytheme is gold

[mariusjopen]

Hi @countach

videos are not possible to display like that on mobile-phones yet.

Have a look here.
Thats a website I programmed some time ago which looks very similar.
http://belius.de/

Here I use jQuery to move images around. You can copy that code if you like.
All the best!

Marius

[countach]

Ok thanks a lot @mariusjopen for having a look, I'll try to use this code;)

[jhc]

This post is deleted!