what is the url of your site?

It has not been published, yet, still under development.

I can provide screenshots, if that will help ?

On my install it looks like


should give you a start.
Add it to your attributes > additional header content.

Hey, tallacman,

that did it. Thank you so much...

Sweet!

hi c5apps,

i have the same issue with a picture. I only can see it at the footer region.
I created an attribute Header Extra Content and i placed your code in it.
But nothing change.

Any idea ? thanks for your help.

Hey C5apps, could you please share exactly how you integrated the background video? I would also be interested in doing this, but it isn't so straightforward - the solutions I have seen involve custom javascript, etc. Also, it would have to degrade nicely / be responsive.

Thanks Blink!

"Hey C5apps, could you please share exactly how you integrated the background video?"

I added the following generic code to
("Page Design, Location, Attributes and Settings" => "Attributes" => "Header Extra Content")

<style>body, div.ccm-page main {background-color: transparent !important ;}</style>
<p>
<video autoplay="" loop="" poster="{CCM:BASE_URL}/folder containing YourVideo.jpg" id="bgvid">
<source src="{CCM:BASE_URL}/folder containing YourVideo.webm" type="video/webm">
<source src="{CCM:BASE_URL}/folder containing YourVideo.mp4" type="video/mp4">
</video>
</p>

Then in ("Page Design, Location, Attributes and Settings" => "Design" => "Theme/Customize" => "Advanced/Custom CSS")

#bgvid {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-o-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
background: url(url of videos 1st picture) no-repeat;
background-size: cover;
}
@media screen and (max-device-width: 800px) {
html {
background: url(url of YourVideo.jpg) #000 no-repeat center center fixed;
}
#bgvid {
display: none;
}
}

Note: YourVideo.jpg is the image of the Your Video file, the first frame as a jpeg.

And thank you C5Apps! I must give this a try.

@C5apps

This video bg is just what I need. I was using a video background script using a youtube video, but it is too slow to load, this one using a webm is better, but how would I modify it to display just in a full screen header (background) rather than on the full page? (i.e. if the visitor scrolls, the full screen video scrolls with the page so I can add text underneath...

I tried messing with the CSS to do this with no avail. THANKS!

@charismabusiness

try removing this:

<style>body, div.ccm-page main {background-color: transparent !important ;}</style>

from ("Page Design, Location, Attributes and Settings" => "Attributes" => "Header Extra Content")

You can check
https://www.concrete5.org/marketplace/addons/video-background1/...