#Add background video with simple css full
#Add background video with simple css android

How you do this is up to you, you could hide the video on small screens in a CSS media query, or use JavaScript to check the user-agent and remove the video entirely on iOS/Android devices.

#Add background video with simple css android

Android devices generally don't play nicely either, so in both cases we're better off just disabling the video and falling back to a background-image. If we were embedding a normal video on our page content this would be fine, but because it's just an added design touch, and doesn't contain any critical information, we'd prefer to just fall-back to an image background. iOS refuses to auto-play videos, and will instead add a large play icon over the top of the video, which will open the media player when tapped. Account for devicesĪt this point in time, background video support on mobile devices is not great.

Unfortunately, browser support for ' object-fit' isn't as good as it needs to be yet, so we either need to use a polyfill, or write some JavaScript to mimic its behavior.įortunately, there's a simple jQuery plugin called jQuery Background Video that can take care of this hassle for us, as well as a few other things that we're about to touch on. There's a lesser-known property called ' object-fit' that does the same thing for actual DOM elements, which would be a great way to ensure our video always covers its container. Ensure sufficient contrast with foreground text That means we should avoid things like fast or excessive panning, shaky/unstabilized footage, and quick cuts. Background videos should be subtle and smooth to avoid distracting our users from what they should really be doing on our website. By it's very definition, the video is supplementary to the website's content, and we need to ensure that it doesn't steal the focus. The key word in 'background video' is 'background'. Shameless plug: you can find some really nice looping videos at BG Stock, a stock video website that I've started specifically for website background videos. You should always limit the length of your video to 30-40 seconds at the most, or even better, find a short video that loops seamlessly, so that it seems like a longer video, but could be less than 1MB or 2MB in size, depending on the length.

#Add background video with simple css full

A low bitrate helps to ensure our video plays through smoothly without pausing to buffer, but we also need to remember that our users didn't come to our website to watch our background video, and we shouldn't assume they're happy to download a full 2 minutes of video, which could be up to 20MB of video that they didn't ask for.