Category: News

If you have used a header video or a background video with the Big Themes, then you have probably noticed the videos are always centered and fit so that the entire video is fit within the screen. You may have wondered if it would be better to set your video to fill the screen, even if some of the video is cut off.

My experience has shown me that in most cases when you set the video to fill the screen, you will end up with a number of different screen sizes (like on mobile) in which the video is cut off to the point that it is indiscernible. My advice would be that anyone who is considering trying to do this is they should consider converting their video to .gif file, then cut the .gif so that it has versatility over a large number of screens. Once you have built the .gif, you can upload it the same way you would load an image.

You also have the option of setting your video into the body of your page instead of using a header video or a background video.

However, if you still truly believe in the versatility of your video, and you think that it will look good on a wide screen or a phone because all of the action is so well centered in the video, or if the video is abstract and can serve exclusively as a background video, and it doesn’t matter what gets cut off, then you can add the following code to your Additional CSS section of your customizer. This code will work for all of the Big Themes for both Homepage Header Videos and Background Videos.

Note that the original height and width of your video will impact the performance of this code. This will be noticeable with larger videos on mobile. It is generally preferable to make your video as small as possible without distorting video quality.

/*This will not work for YouTube videos*/

.bb-backVid, 
.bb-backVid video, .bb-backVid iframe,
.wp-custom-header, .wp-custom-header video, .wp-custom-header iframe{
	/*the maxes must be able to extend as far as necessary.  You may decide that one of the next two values makes the video look better if it is reduced to 100, even though it may produce negative space on some screens*/
	max-width: 1000000vw;
	max-height: 1000000vh;
	
}

.wp-custom-header,
.bb-backVid {
	background-size: cover;
    background-position: 50% 50%;
    height: 100vh;
    width: 100vw;
}

.wp-custom-header video,
.bb-backVid video{
	-webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
}

/*The video must be fixed, or it will protrude into the body*/
.wp-custom-header video,
.wp-custom-header img,
.wp-custom-header iframe {
	position: fixed;
	z-index: -999;
}

Set Your Video to Fill the Screen on Mobile

If you have a horizontally aligned video (a longer width than height), then you may find that it is helpful to also include the following at the bottom of your your new CSS update.

@media screen and (max-width: 1050px) {
	.bb-backVid, 
.bb-backVid video, .bb-backVid iframe,
.wp-custom-header, .wp-custom-header video, .wp-custom-header iframe {
	max-height: 100vh;
	}
}

This will make sure that the video area doesn’t push unnecessarily into the top and bottom when the screen height is short and narrow.

If you wanted to be fastidious you could also add the following for larger screens:

@media screen and (min-width: 1051px) {
	.bb-backVid, 
.bb-backVid video, .bb-backVid iframe,
.wp-custom-header, .wp-custom-header video, .wp-custom-header iframe{
	max-width: 100vw;
	}
}

You may need to play around with min and max width to coordinate with your particular video.

Vertically aligned videos (like the kind shot on a phone) are less likely to respond well to the above code, but if you do find a video that works, then you will probably want to swap out the horizontally aligned mobile and code additions with the following:

@media screen and (max-width: 1050px) {
	.bb-backVid, 
.bb-backVid video, .bb-backVid iframe,
.wp-custom-header, .wp-custom-header video, .wp-custom-header iframe {
	max-width: 100vw;
	}
}

@media screen and (min-height: 650px) {
	.bb-backVid, 
.bb-backVid video, .bb-backVid iframe,
.wp-custom-header, .wp-custom-header video, .wp-custom-header iframe {
	max-width: 100000vw;
	}
}

It is hypothetically possible to automate this with JavaScript, but this will likely require screen adjustment performed at runtime which could be seen by visitors. Using pure CSS insures that the video will be properly sized as soon as the page loads.

This code will not cover every scenario, but you should be able to modify it to suit your video.

Please leave any question in the comments section.

I’m working on a new theme with the working title “Big Patterns.” I hope to be launching it in the near future. The new major features are:

1. Block patterns have been designed to work with the theme and the customizer. Unlike other block patterns, you should be able to focus on adding your content while only having to make a few (if any) changes to styling.
2. You’ll have much greater control of the site’s body in relationship to the navbar. People have been asking about a feature like this for a long time. You no longer need to rely on the default settings or using custom CSS. You can now control how much or how little you want to expose the background directly from the Layout section of the customizer.
3. A three column footer is available. If you want to create more than a simple footer, I’ve given you the tools that you need.

Check out the themes page for the latest release information.