Also Available For WordPress
Display awesome full screen media backgrounds
You can display full screen videos, audio, images, and color backgrounds. Supported videos are from YouTube, Vimeo, Wistia, Dailymotion, and HTML5 Videos. HTML5 audio files supported are MP3, MP4, M4A, WEBM, OGG, WAV, and AAC.
See how it works on the demo site.
Simple to Use
Just link UMBG’s CSS file to your html page and add jQuery and UMBG’s script file to your specific html page and set the options you need.
Full of Options
All of the necessary options to display full screen backgrounds to your needs:
- Append To
- Media Type
- Media ID or File Location
- Poster
- Media Link
- Overlay – 43 styles included
- Quality – HD or SD
- Auto Playback
- Start At
- End At
- Delay
- Loop – fade-out media background at end of playback option
- Audio – Start audio muted option
- Controls – change it’s visibility, colors & placement
- Page-Up-Down (PUD)
- Fade-In-Out (FIO)
- Enlarge Media – hide unwanted objects
- Aspect Ratio
- Image Display Duration
- Image Transition Duration
- Image Effect
- Image Effect Easing
- Disable on mobile devices
- Scroll-to-Top Button
- Keyboard Controls
- And many more!
Page-Up-Down (PUD) allows the page to be scroll up and down to display a full view of the media background. Fully adjustable for all your needs.
Fade-In-Out (FIO) lets you set an opacity (transparency) effect for a better view of the media background.
Includes
- Documentation File – Mobile Friendly
- UMBG Files Folder (includes UMBG-Slider)
- UMBG Zipped Files Folder (includes UMBG-Slider)
- Read Me File – readme.txt
FAQ
What media can I use?
With UMBG you can use videos, audio, images, and colors to display beautiful full screen backgrounds. Supports HTML5 audio, HTML5 videos, and hosted videos from YouTube, Vimeo, Dailymotion, and Wistia. You can also use multiple images to create a full screen slideshow.
Does it work on mobile devices?
Playback on mobile devices is supported.
What UMBG does not do?
UMBG is not a media editor. It only lets you use the media you select as a full screen background and helps you adapt the media to a page with the available options. For media needs that go beyond what UMBG can do please use a media editing software to modify the media file further or consult the proper professional.
Does it include videos or images?
UMBG does not include any media. It does not include any videos or any images. You must use videos from the supported video hosting websites or use an HTML5 video or upload your own images to use with UMBG. Only the overlay patterns are included with UMBG.
Requirements?
UMBG requires jQuery version 1.11.x, 2.1.x, or 3.2.x.
Change Log
2020-03-28 – v1.7.1
– Fix issue causing images to not display.
2020-03-24 – v1.7.0
– Add play inline videos for mobile devices.
– Add disablePictureInPicture to HTML5 video player: relating to FireFox 72+.
– Fix Wistia videos not playing.
– Fix audio mute issue with Vimeo and Wistia.
2018-01-06 – v1.6.0
– Add HTML5 Audio capability.
– Handles the new WebKit browsers (i.e. Safari, Chrome) auto-play changes.
– Add UMBG events for playback initial start, play, pause, and end.
– Add JS Promise check for new WebKit browser’s auto-play capabilities.
– Fix Vimeo API changes.
– Fix loading UMBG Slider when using minified version.
– Fix another issue with detecting some Android devices.
– Change variable delayCallback to delayCallbackBy.
– Change function name htmlPlayer() to htmlVideoPlayer().
– Enhanced HTML5 source loading time.
– Update DailyMotion deprecated player parameters.
2016-11-11 – v1.5.1
– Fix mobile detect issue with some Android devices.
2016-07-04 – v1.5.0
– Add keyboard controls.
– Add mediaStartFadeIn.
– Add public playback methods.
– Add start, pause, & end playback callbacks.
– Add scroll-to-top button.
– Change playback functions.
– Change player controls functionality.
– Change YouTube API callback.
– Change Vimeo API to use Froogaloop.
– Change some CSS class names.
– Fix YT Page Visibility Pause.
– Fix Dailymotion API events change.
2016-05-18 – v1.4.3
– Add missing images folder containing some of the overlay patterns.
2016-03-02 – v1.4.3
– Fix media end fade-out function.
– Change default mediaLink value to ’’.
2016-02-28 – v1.4.2
– Fix Page Visibility Pause and autoplay.
2016-02-25 – v1.4.1
– Fix autoplay on image slideshow.
– Fix UMBG-Slider script not loading with some EU mobile providers.
2015-12-04 – v1.4.0
– Add option to enable or disable autoPlay.
– Add option to link the media background.
– Change default setting for pudUp to 1.
2015-11-01 – v1.3.3
– Fix YouTube API change causing looping issue with Safari.
2015-10-18 – v1.3.2
– Fix transitioning of slides when the duration is a decimal number (in secs).
– Add default settings missing description comments.
– Enhance code format.
– Change default value of disableOnMobileVideoOnly from 1 to 0.
2015-10-14 – v1.3.1
– Enhance slideTransitionDuration.
– Fix FIO transition effect sometimes not initializing properly.
– Fix disabling on mobile devices not working when Image type is selected.
2015-09-22 – v1.3
– Add start video with audio muted.
– Add FIO (Fade-In-Out) for page content.
– Add Media End Fade-Out (MEFO).
– Add slideTransitionDuration for umbg-slider.
– Enhance start PUD down, page will start down immediately.
– Enhanced Page Visibility Pause functionality.
– Enhanced resizing for mobile devices.
– Fix delayBy when using Image media.
– Renamed variable videoOverlayTransparent to mediaOverlayTransparent.
2015-07-22 – v1.2.3
– Enhance code for YouTube videos.
– Try using YT HTML5 player first then fallback to flash.
2015-07-06 – v1.2.2
– Remove PUD restriction to hide controls.
– Update documentation.
2015-06-29 – v1.2.1
– Fix YouTube play button sometimes not working.
– Enhance the code for disable on mobile option.
2015-06-23 – v1.2
– Add option to disable backgrounds on mobile phones only.
– Add Wistia do not track option.
– Update documentation.
2015-06-17 – v1.1.2
– Fix HTML5 audio volume not matching set level.
2015-06-16 – v1.1.1
– Fix HTML5 audio playing while audio option is disable.
2015-06-16 – v1.1
– Add disable on mobile device feature.
– Update Vimeo API change.
– Fix the CSS style issue with the controls on mobile phones.
2015-05-29 – v1.0
– Initial Release
Source
