Full Screen Video

Roy AngerUpdated:

A few people have asked about full screen video without using Revolution Slider. X/Cornerstone already supports background video, so we only need a little massaging to make it full screen. However, before we do that let’s talk about the challenges of doing this.

First, you will need to either self host the video or have a direct link. A normal Vimeo or Youtube link is not a direct link, but rather a link to the page. You need to be able to link directly to the file. On Vimeo this requires a Pro account, so I have not yet checked it out to see how it works. That brings us to the second concern.

If you don’t have Vimeo Pro and you self host, you run into the same potential problem as self hosting video in Revolution Slider. The user must download that files to see the video, and there is often going to be a delay before the video starts to play. This is one big reason I haven’t used BG videos, and would be very careful doing so.

So, you still want to do it? Alright then.

You want to create your page. You can use a header or not — we’ll cover both options. In the first section, you want to add a background video. You can also set a cover image, so if the browser doesn’t support background video the image will be shown instead. Also make sure the margins and padding for the section are 0px;

Now all we need is a little CSS. Drop the following in your Custom CSS area for the page. You may have some space around the section left due to custom CSS. If so you’ll need to inspect, locate and adjust that.

#x-section-1 {
  height: 100vh;
  width: 100vw;
}

What happens if you still have a header? We need to make a few adjustments. First you need to inspect your page and figure out the height of the masthead (topbar, logo, navbar, etc). For X Theme Tips ( at least when I wrote this) the height was 154px. Now we can use one of these options below. As a note, there are many other ways to do this and you might need other solutions (positioning the menu, etc) depending on your page. We can’t account for everything unfortunately.

/** Move the video up and behind the header **/
top: -154px;

/** or **/ 

/** Reduce the size of the video section so the top isn't clipped **/
height: calc(100vh - 154px);

Take a look at the demo page to see it in action.

Have a question or a comment about this article? Click here!
About the Author

Roy Anger

Hey everyone. I made my first website way back in about 95, before PHP, Wordpress, CSS and even tables. I love the flexibility and framework available in X, and love working with X on client sites. Aside from Wordpress, I love spending time with my two girls (girlfriend and chocolate Lab), trying to be a decent photographer and generally relaxing.

Share this Tip!