HTML5 Video & Youtube background

Click image to view demo

View plugin documentation

Clean and simple video background plugin for any website supports videos, Youtube and Vimeo, background audio, simple images, 360 virtual reality video, image panorama and Apple HLS, and MPEG DASH Live streaming.

Use this plugin to play single video in a loop, multiple looping videos or mixed playlist of videos and images.
Built in skip to url feature after video finish and navigate to new page makes it suitable for intro and landing pages.

Apply to all pages or on specific pages in website. Plugin can be used as full video background or within any HTML element in the page.

Features and options:

• Responsive or fixed size posibilities
• Media support
• Self hosted video (or any public link that plays in browser)
• Virtual reality 360 video, example here
• Apple HLS Live Streaming, example here
• MPEG DASH Live Streaming, example here
• Youtube single videos
• Vimeo single videos
• Image support (with optional time duration)
• Image panorama 360, example here
• Self hosted audio (or any public link that plays in browser) with optional image slideshow background
• Mixed media in playlist
• Single looping video
• Only mp4 video format required for all browsers and devices
• Randomize playlist
• Autoplay on mobile (muted)
• Video aspect ratio (fit inside, fit outside, original size)
• Video playback speed
• Video start / end time
• Optional basic controls (pause/play/volume, seekbar etc) over video area
• Optional built in skip intro feature (plus navigate to url video end)
• Optional keyboard navigation
• Option to use native player on mobile
• Option to disable click on video background to pause play video.
• Optional video overlay
• API methods
• Callbacks

Notes
This is javascript plugin for standalone website.

Due to current browser restrictions, video autoplay is possible muted, and audio requires user interaction with the page beforehand to start playing. Alternative it to use button in player controls or your own custom button to start audio playback on click.

Updates / Changelog

VERSION 4.61 [16.10.2024]

 - [ADD] mobile background aspect ratio option

VERSION 4.5 [12.1.2024]

 
 - [UPDATE] converted player to javascript only (no jquery dependencies)
 - [ADD] optional thumb gallery
 - [UPDATE] new setting autoPlayAfterFirst

VERSION 3.82 [18.10.2023]

 
 - [UPDATE] youtube embed parameters

VERSION 3.8 [19.12.2022]

 
 - [FIX] is start time was set on self hosted video, video would not play
 - [FIX] controls container not working
 - [FIX] if coming from poster video autoplay would require 2 clicks for video to start
 - [UPDATE] use video as a blob (self hosted)
 - [UPDATE] choose between video or document fullscreen
 - [UPDATE] update to svg icons 
 - [ADD] add restart button in controls

VERSION 3.71 [9.11.2022]

 
 - [UPDATE] youtube responsiveness update

VERSION 3.7 [17.11.2021]

 
 - [UPDATE] option to remember playback position on page change 

VERSION 3.65 [16.4.2021]

 
 - [FIX] hls load new video 

VERSION 3.61 [15.2.2020]

 - [ADD] 2 new event callbacks (fullscreenEnter, fullscreenExit)

VERSION 3.6 [5.11.2019]

 - [ADD] option to show poster after video end screen (self hosted video, youtube, vimeo)
 - [ADD] option to skip poster 
 - [ADD] optional video quality for mobile for self hosted video

UPDATE 3.5 [28.8.2019]

 - [FIX] Toggle playback with multiple instances in the page

UPDATE 3.46 [28.7.2019]

 - [FIX] Vimeo ended event

UPDATE 3.45 [7.6.2019]

 - [ADD] MPEG DASH support

UPDATE 3.4 [31.5.2019]

 - [ADD] Virtual reality 360 video
 - [ADD] Image panorama
 - [ADD] Apple HLS Live Streaming
 - [UPDATE] General improvements

UPDATE 3.1 [25.3.2019]

 - [UPDATE] add audio support (with optional image slideshow background)
 - [UPDATE] some new options

UPDATE 3.0 [25.3.2019]

 - [UPDATE] add Vimeo support (single video)
 - [UPDATE] add image support 
 - [UPDATE] code improvements

UPDATE 2.65 [27.9.2018]

 - [UPDATE] small code improvements

UPDATE 2.61 [13.5.2018]

 - [UPDATE] update for Chrome autoplay

UPDATE 2.6 [10.3.2017]

 - [UPDATE] some code improvements

tags: audio, background, background video, intro, landing page, video, vimeo, widget, youtube