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.
1. 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/
2. 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/
3. 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
4. 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=
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).
5. Responsive Background Video
6. Fullscreen HTML5 Page Background Video
7. 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.
8. Fullscreen Background Video with Mix-Blend-Mode Overlay Text
9. Vimeo video in background with HTML5
This is simple one coded with HTML video tag and video from Vimeo.
10. YouTube full-width video loop as a header background v2 avoiding 100vh – WIP
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