Full Page Video Background

Support
#1

I would like to incorporate a full page video background effect on a client’s site. This would serve as the background for the entire website not just a specific section.

I found some non x theme information here https://www.w3schools.com/howto/howto_css_fullscreen_video.asp but am looking for assistance with incorporating it.

Thanks in advance.

Jeff

#2

Hello @idpweb,

Thanks for asking. :slight_smile:

You can use Revolution Slider plugin that comes bundled with X Theme to display full screen background video. You can install Revolution Slider from X > Validation > Extensions.

I am sharing few getting started tutorial that you can take a look:


https://www.themepunch.com/revsliderjquery-doc/slider-revolution-jquery-5-x-documentation/

Thanks.

#3

Once I’ve made the revolution slider how do I change the settings in x to use is as the page background?

#4

Hello @idpweb,

Thanks for asking. :slight_smile:

Please take a look at following article.

https://www.themepunch.com/faq/set-slider-pages-main-background/

Thanks.

#5

Thanks for the info! I’m still not quite there …

I was able to get my sample video to play but it’s showing on top of most of the other items on the page. Please see here http://www.beerminimum.com/contact/.

Also, using the code you linked to effects all sliders on the page.

Any suggestions?

#6

Hi idpweb,

I’ve checked your website and I can’t get the video working on that page you linked to, I can see you are running an old version of X theme, Cornerstone and Slider Revolution plugin, please follow this guide to update theme/plugins to the latest stable version:

If you added the code to “slider’s” custom CSS area, then it will affect only this slider, this is where you should add your code:

Thanks.

#7

I’ve updated everything and am now current.

I’ve viewed the page I sent you in the link above on IE and Chrome and am able to see the video. The video is still showing “on top” of several of the areas. I did put the CSS in the Slider CSS settings.

#8

Hello There,

You will have to insert the slider above your masthead and add a custom css in the theme options:

.x-slider-container {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%; 
    min-height: 100%;
}

To know more how you can incorporate a slider in the masthead, please check this out:

And if nothing is working out for you, please provide us access to your dashboard so that we can check your settings.

Thank you.

Background Video - Whole Page (or Entire Website) - Pro
#9

I am still unable to get this to work. It renders fine when in the cornerstone preview but not live.

What’s the best way to send you my login info?

#10

Hi there,

Looks the same in both preview and live page, would you mind providing a screenshot of what you’re seeing?

Thanks!

#11

In the screen shot you provided the video is on top of parts of the page.

#12

Hi there,

Were you able to get this sorted?

I have just checked your site and the video seems to be displaying correctly in the background and the main page content is above it.

#13

I think I got it sorted for the most part. On my screen there is a bar beneath the video that is playing. How can I get rid of that on this page. http://www.beerminimum.com/contact/

Another issue I’m having is that am trying to use the same revolution slider on this page http://www.beerminimum.com/wip/ with the same settings and am not getting favorable results. This page has another slider, while the other doesn’t, could that be posing the issue?

The css on that page is:

.x-slider-container {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
}

I appreciate all the help you can give me in resolving this ASAP.

Thanks!

#14

Hi There,

Please set your Slide Layout to Full-Screen


Would you mind to clarify what is the issue with the slider on this page (http://www.beerminimum.com/wip/), it looks identical to me on the contact page.

Thanks,

#15

The video is on top of parts of the body of the site.

#16

Could you rephrase or give more details by what you mean by “top of parts of the body of the site”.

If you mean your background video is showing through the body and wanted to fill it with a background like this

Set each of your section’s background to white or, add this code to your Global or Content CSS.

.entry-content {
    background-color: white;
}

Thanks.

#17

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.