Your Source for Premium Adobe Muse Templates, Widgets and Tutorials

Background Video

So many users are requesting more and more video tools. We have had a couple of iterations which have worked well. Now the challenge is to create a super simple always responsive background video player, from scratch.

Posted by Jason Tinnin on 01/17/2018

Background Video that Works on Phone and Tablet Devices

In this updated release of the background video widget, we have simplified the functionality and added some REALLY amazing features that you're going to love...

Support for Tablet and Phone Devices

This feature that has long been requested and is now available to you for immediate download and testing on your projects.  For the most part, non-iOS devices have been able to handle background video just's those pesky Apple devices (iPhone, iPad) that have shut down the auto-playing videos.  While this is exciting news, you need to be aware of some small limitations

  • iOS Support for auto-playing was introduced in iOS 10+
  • Older iOS versions will not support auto-playing video and therefore will show the poster image instead
  • Depending on your device connection speed and size of video, background video may take longer to load on a mobile device

Proper Video Scaling

We're using a combination of CSS and JavaScript to handle the scaling of the video depending on the dimensions of the screen.  In most background video solutions on the market, you'll find CSS only solutions that distort the video by retaining it's original video size, therefore, creating a "zoomed in" effect which reduces the quality of the video.

In our widget, you'll notice a crisp video with proper scaling effects.

Removed support for webM and ogg video types

According to the w3c, every major browser supports the mp4 format (unless you're running Opera < 25) so we have reduced the amount of effort you have to put into your videos by not recommending (nor requiring) the use of webM nor ogg formats.  Every test we conducted across a multitude of devices played the mp4 format perfectly.  For more information on supportiing video formats, visit and scroll down to browser support.

There is a small, non-critical bug that Muse needs to fix

I spent nearly 5 hours trying to resolve what I thought was a bug I created but discovered it's a Muse bug that they need to resolve.  If you install the video background player and load it up on your mobile device in portrait view, it works great.  If you rotate your device to landscape, once again, it plays and works great.  However, if you rotate your mobile device back to portrait, Muse completely deletes the video from the page.  This does not affect the desktop experience, as there is no "rotating" action. 

Watch the Overview Video

Posted by Chris Kellett on 01/03/2018

Beta Background Video - Initial Release Candidate

So this is the first beta candidate 1.0. The player is super simple no bulk you just load the MP4 and WebM videos into the player no poster, no overlay that will all be done with Muse.

We are using the background fill options built into Muse for the poster image. If you want to add an overlay using a Muse rectangle. This keeps the codebase light and fast and gives the best flexibility.

See the widget in action below:

Posted by Chris Kellett on 12/15/2017

Initial Draft Responsive Background Video

We have had a few background video widgets however with the recent updates to Muse we have found that there are some ongoing issues with a lot of third party vendor widgets. One thing we want to avoid is using third party service such as YouTube or Vimeo mainly because this in effect puts a player in a player (unless you are linking to the remotely hosted file) which seems like a bad idea. The second it (especially in the case of YouTube) is that you end up hiding or covering the YouTube branding which is directly against their terms. 

For speed, it is also a good idea to pull the correctly encoded background video files from the hosting server rather than a remote source. So these are the requirements for the video player.

  1. Small code base for fast loading.
  2. Fully responsive and scaling.
  3. Can be used as a viewport filler video and push content down when scaling the browser.
  4. Works correctly with the Muse breakpoints methodology to ensure smooth playback when breakpoints change.


By downloading this item, I understand that this is in "pre-release" status so normal support considerations are not applicable.

Other Lab Projects

Age Checker Widget Background Video Favicon / Web Clip Icon Maker Fyuse Embed Widget Responsive Facebook Video Player Responsive Self-Hosted Video Player Responsive Vimeo Video Player Responsive YouTube Video Player YouTube Playlist | Gallery