Background video

Permalink 2 users found helpful
I have placed a video as the background for my site Home page. The C5.7 Home page, of the Elemental theme, by default has a white background. After placing the video background, the video can only be seen, at the footer region of the page, everywhere else it is white. Thus, the video is being blocked by the default white background, in most areas.

Now when I remove this line, "<link href="/c5/application/files/cache/css/elemental/main.css" rel="stylesheet" type="text/css" media="all">", from the meta tag of the Home page, the white background disappears completely, and I can see the background video, correctly, everywhere. However, the styling on the page is broken (since the removed meta line, is a styling link).

What can I change, to enable the background video to show, without eliminating all the other styling on the page ?

Being able to control the transparency of the default background, instead of removing it, altogether, would be ideal.

c5apps
View Replies: View Best Answer
tallacman replied on at Permalink Reply
tallacman
what is the url of your site?
c5apps replied on at Permalink Reply
c5apps
It has not been published, yet, still under development.

I can provide screenshots, if that will help ?
tallacman replied on at Permalink Reply
tallacman
On my install it looks like

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

should give you a start.
Add it to your attributes > additional header content.
c5apps replied on at Permalink Reply
c5apps
Hey, tallacman,

that did it. Thank you so much...
tallacman replied on at Permalink Reply
tallacman
Sweet!
europequipement replied on at Permalink Reply
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.
arlenesey replied on at Permalink Reply
arlenesey
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.
blinkdesign replied on at Permalink Best Answer Reply
blinkdesign
arlenesey
an older thread regarding bkgr-video:
http://www.concrete5.org/community/forums/5-7-discussion/responsive... i tried the html version and it worked fine.
regards
da blink.
arlenesey replied on at Permalink Reply
arlenesey
Thanks Blink!
c5apps replied on at Permalink Reply
c5apps
"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.
arlenesey replied on at Permalink Reply
arlenesey
And thank you C5Apps! I must give this a try.
CharismaBusiness replied on at Permalink Reply
CharismaBusiness
@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!
c5apps replied on at Permalink Reply
c5apps
@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")
amrod replied on at Permalink Reply
amrod