Proof of concept
Video loop should be 20–40 seconds long. The current version is far too short for production usage but perfect for testing.
Will handle multiple videos.
Each with custom start & end points.
The blank screen between videos is covered by an animated static image.
Video height is defined by the height of the containers text content.
Video width is set (height * 16 / 9) to maintain the aspect ratio.
If the viewport is not that wide then the video is cropped from the right.
If the viewport is wider than the video width then the video height is recalculated (viewport width / 9 * 16)
Support required down to IE9.
- Use a HD video @ 1920 x 1080px
- Video length 20–30 seconds
- Audio is not required and discouraged.
- Video should have as few hard cuts as possible to reduce distraction.
- Cross-fades / disolves are encouraged.
- Avoid branding or textural content in the video
- Full-screen YouTube video background in pure CSS
- Responsive YouTube video background
- Youtube video with start and end time
- Google docs: YouTube iframe API reference
- Google docs: YouTube player
- Abstracted player
- SVG backgrounds crossHatching grids and checkerboards
- Fullscreen HTML5 background video