Fullscreen Responsive Background Video using HTML, CSS, JS

There are when we want to portray many items of our company, business website and we combine them to make a video it. But instead of simply just showing it to any website, we can have the video added in background of website sections, which will play in background having influential text above it to explain more about the content and target the audience as well.

We have collected some of ways to add responsive HTML5 video in background which can be hosted on YouTube, Vimeo, AmazonAWS and private hosting server. Some of these are pure html, css based only and some uses javascript too.

1. Responsive HTML5 Background Video Demo

Responsive HTML5 Background Video Demo
Responsive HTML5 Background Video Demo

This is simple background video demo. This uses the jQuery Background Video plugin along with some simple html and css to generate this background video.

The video overlay pattern is available at http://html5backgroundvideos.com/pattern-overlays/

Demo / Code

2. FullScreen YouTube Video Background In Pure CSS

FullScreen YouTube Video Background In Pure CSS
FullScreen YouTube Video Background In Pure CSS

Here a video is used from YouTube which is the International Space Station orbits the Earth every 92 minutes, with its crew seeing a sunrise 15 times a day. It exists as a scientific, educational, and engineering platform in low orbit, 330 to 435 kilometres above the Earth.

Original timelapse by Riccardo Rossi (ISAA), used under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License. Raw photos courtesy of http://eol.jsc.nasa.gov/

Demo / Code

3. Simple Background Video with autoplay and loop

Simple Background Video with autoplay and loop
Simple Background Video with autoplay and loop

This video background by Monika Piotrowicz shows a robotic video. This code uses different video formats such as webm, og, mp4, 3gp and a placeholder image in case if the browser doesn’t supports the background video code.

Here is some more information about the video, Super Cool Motor Robots!

CAVEAT – this is a way to make a somewhat awkward pattern a little less awkward. Depending on the video, text might be a little hard to read. Also, site owners are the best judges of whether or not the video actually needs “alt” text, or if it’s just decoration. In that case, aria-hidden may be the better approach.

Having a video autoplay and loop may not be suitable for all audiences either, especially if the video has a lot going on visually and can be distracting.

For more background, read Emma Sax’s article about accessible background videos

Demo / Code

4. Responsive YouTube video background

Responsive YouTube video background
Responsive YouTube video background

This is fully responsive & mobile friendly YouTube video background scaled with 16/9 aspect ratio. Actually bunch of videos – js loads randomly 1 of 4 with different start/end times, then it loops through all the vids.

You can use ?start= and ?end= to define start and end points, such as:

https://youtube.com/watch?v=2b5QNj-BVhs%3Fstart%3D53%26end%3D59

This only works with the above (embed) style of link (as opposed to the watch page).

Note: the time must be an integer number of seconds (e.g. 119, not 1m59s).

Demo / Code

5. Responsive Background Video

Responsive Background Video
Responsive Background Video

This one has is created with combination self hosted video and of html, css and javascript. This has a overlay of brown transparent color and grid of dotted small squares.

Demo / Code

6. Fullscreen HTML5 Page Background Video

Fullscreen HTML5 Page Background Video
Fullscreen HTML5 Page Background Video

Demo / Code

7. Background Youtube Video in Header

Background Youtube Video in Header
Background Youtube Video in Header

If you are creating a website, where you want to add a video in background of header area of your website, this code is very helpful. It uses an iframe to embed the video from YouTube.

Demo / Code

8. Fullscreen Background Video with Mix-Blend-Mode Overlay Text

Fullscreen Background Video with Mix-Blend-Mode Overlay Text
Fullscreen Background Video with Mix-Blend-Mode Overlay Text

This is with header, menu items, and a hero are giving it a feel of E-Commerce or online store site. The video has been hosted on amazonaws with jpg, webm and mp4 video formats. It’s responsive and also html, css, javascript.

Demo / Code

9. Vimeo video in background with HTML5

Vimeo video in background with HTML5
Vimeo video in background with HTML5

This is simple one coded with HTML video tag and video from Vimeo.

Demo / Code

10. YouTube full-width video loop as a header background v2 avoiding 100vh – WIP

YouTube full-width video loop as a header background v2 avoiding 100vh - WIP
YouTube full-width video loop as a header background v2 avoiding 100vh – WIP

Created with YouTube Video API written in html, css, javascript with having a play and pause button to control the background youtube video playing, also has a grid overlay. This video loops through and the height is calculated with viewport height.

Demo / Code

video in background, background video html, html video background, youtube video background, vimeo background, responsive background video, css only background video, responsive html5 video, fullscreen video, fullscreen responsive video, codepen video, video background, fullscreen HTML5 Page, Mix-Blend-Mode Overlay, Video Background Overlay, Background Video Loop

Leave a Reply

Your email address will not be published. Required fields are marked *

You may also like