Use a video as page background

Nunomaio · Oct 18, 2016, 5:53 PM

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 · wrote on Oct 19, 2016, 1:09 PM

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

Nunomaio · wrote on Oct 19, 2016, 2:44 PM

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 · wrote on Oct 25, 2016, 2:51 PM

Hey Armin, could u see it?

thanks

best,

Nuno

arminunruh · Oct 26, 2016, 1:15 PM

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 · wrote on Oct 26, 2016, 1:15 PM

@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 · Oct 28, 2016, 3:59 AM

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 · wrote on Oct 28, 2016, 12:37 PM

@arminunruh said:

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

Thank you man!

And thank you for your help :D

countach · wrote on Nov 22, 2017, 10:40 AM

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 :

And in custom HTML at bottom

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 · wrote on Nov 23, 2017, 11:37 AM

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 · wrote on Nov 23, 2017, 1:23 PM

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

jhc · wrote on Jul 22, 2023, 2:38 PM

This post is deleted!

Lay Theme Forum

Use a video as page background

Before you post:

When you post:

Online Users