Video background and responsive web design.

As I recently wrote, video backgrounds have become an extremely popular addition to modern websites, and my latest article met with great interest from our community; in fact, many of our users were asking about this solution in our support forum. Most of the questions were focused on controlling the video header on tablet or mobile versions of your site. So in this article I'll do my best to help you improve your headers a little!

How to remove your header video on mobile devices

Let's start with mobile devices; my personal opinion is that for mobile screens you're better off not displaying the video at all, instead displaying an image that provides a similar stylistic look without the video element. The reasoning behind this is that generally videos have far bigger sizes than images and load slower – this might not be an issue on a desktop, but for most mobile users speed is of the essence and reducing load time should be a priority. There's also another issue on devices that use iOS, because this OS doesn't allow videos to autoplay, so you'd need to implement some buttons/controls to play/stop your video, which impacts the user experience.

So, let's make this video disappear. Assuming that you've used the second option for adding a video that I covered in my last post (that is, using the HTML5 video tag), and that you are working with Steakhouse theme still for clarity, the default viewport width set in this theme is 640px. By using media queries we can hide our video and display an image instead when certain conditions are met:

@media (max-width: 640px) {
    #gk-header { 
   		background: url(path_to_your_image) #000!important;
    	background-size: cover;
    }
    #bg-video { display: none; }
}

In this code I've also used the background size css propery set to "cover", which will scale the background image to be as large as possible so that the header area is completely covered by the image. The code above should be added into css/override.css file or into custom CSS plugin.

Adjust the header on other devices.

Generally when you are resizing your browser you should see that video is also resized accordingly; this is because the width property is set to 100%. However, in tablet screen-sizes and the like you may find that part of the header (i.e. icons) are not visible; whether or not they are depends on your video's width,height and ratio, and of course on your header content (logo, icons, text etc.). For testing purposes I'll use a full width video (1920 x 1080) and the default Steakhouse header content.

The problems start when the viewport width reach 1100px; you can check this by using browser extensions like Viewport Dimensions or by opening your website in a viewport resizer.

To counter this problem, we'll need to reduce or eliminate some content at this screen size, which we can achieve by attaching CSS rules to the following media query:

@media (max-width: 1100px) {
  #gk-header-mod h1 {
    font-size: 26px!important;
    padding-top: 0;
  }

  #gk-header-mod h2 {
  	font-size: 18px;
  }

  #gk-header-mod .gk-logo {
	-webkit-transform: scale(0.7, 0.7);
	-ms-transform: scale(0.7, 0.7);
	-o-transform: scale(0.7, 0.7);
	transform: scale(0.7, 0.7);
  }

  #gk-header-mod .gk-short-menu i {
  	font-size: 40px!important;
  }

  #gk-header-mod .btn {
  	height: 50px;
  	line-height: 50px;
  }
}

Generally we shouldn't use !important with css rules, but in some cases it's necessary when we don't want to override other responsive CSS rules already included in the Steakhouse theme.

After fixing up the content at 1100px, we can continue resizing our browser window to see if everything's fixed. You'll likely notice that though all's well at 1100px, once we reach around 880px we get some display issues once more. To get around this, we need to add another media query value with fixes:

@media (max-width: 880px) {
	#gk-header-mod .gk-logo.gk-logo-css {
		margin: 0 auto!important;
	}

	#gk-header-mod .gk-short-menu li {
		margin: 0px 10px;
	}

	#gk-header-mod h2 {
		display: none;
	}

	#gk-header-mod .gk-short-menu {
		margin: 10px 0 40px 0;
	}

	#gk-header-mod .btn {
		margin-top: 5px;
	}
	#gk-header-mod .gk-short-menu li {
		line-height: 1.2;
	}
}

and that's that; now once our viewport drops under a width of 640px our video is replaced by the image and our work is done.