Using background video in your Muse sites

5 minutes to complete this task.
You may have seen it on many sites that you admire. 5 minutes to complete this task.

Learn how to use the 123Muse background widget

Add a background video to your Muse site.

Get the background widget here:

Click on the link below to get the background widget.

DOWNLOAD March 2015 Downloads Pack

One of my favorite uses is on the Paypal home page as seen here -

How do we achieve the same objective in Muse? You will be pleased to know that the process is very simple thanks to the power of widgets.

We are going to use the Cover Video widget included in our downloads. Before we start placing the content on the page lets, run through a couple of pre-requisites.

We need to ensure that our content has been encoded to allow for fast playback that requires a smaller file. Our header video presets are a good choice as they have been designed specifically for this purpose.

The video should loop so that there is not a noticeable jump from the end frame to the beginning frame. You can achieve this by having a fade in from white or another color at the start and a fade out to the same color at the end of the video if the two frames are significantly different.

A couple of points to think about before adding background video.

1The video should add to the page and should not just be used to look cute. Videos can slow down your pages and distract if it is not in line with or complimentary to the page.

2The video should either (a) not contain any audio (this will also make the file size smaller and, therefore, the load time quicker) or (b) be muted at the start.

3Make sure the video is not too short or it will make the site feel repetitive and your viewers may lose interest. 15 - 30 seconds is a good length for background video.

4Ensure that content placed on top of the video is readable and in high contrast to the video. This can be achieved if needed, by using a semi-transparent block behind any overlaying content.

5Ensure that the video has been encoded to be of high enough quality to look professional at the same time as being as small in file size as possible.

The assets you will need:

We are going to host this video with the website so make sure you have the following assets:

1The MP4 file version of the video.

2The WEBM file version of the video.

3A JPEG or PNG image poster to use as a fallback image if the video fails. This is typically the first frame of the video and also acts as the content prior to the video loading and commencing playing. Miro has a setting to do this automatically for you.

With our content ready we can go ahead and start adding the video content to the page.

Step One:

It is a good idea to set the header, footer and margins to zero. Ensure that you have the 'Background Video' Widget from 123muse installed. Drag the widget onto the page canvas.

Addons options

You will notice there are two parts to this widget. The video background container and a button. The video container is required, the button is not. The button allows the user to pause and restart the video.

Select the container and use the 100% width button to make it fill the width of the page. With the container still selected use the bottom handle to drag the height to the base of the page.

The widget will resize the container when you preview or publish the page, so we are resizing it to assist us while designing the rest of the page.

Step Two:

You will want to load the fallback image next. Typically a screengrab of the first frame of your video. The image is used if the video does not load, or video playback is not available on the device the user is using to look at your site.

Addons options

Step Three:

Now its time to load the videos. Decide whether you want to use a remote file or to upload videos with the widget.

If you are going to upload the videos with the page select the "Uploaded File" option for both MP4 and WEBM then use the "Add File" tool to select the files you want to upload.

If you have already uploaded your video to a video hosting service and have URL's for the video files, use the "Remote URL" option and copy and paste the URL's into the option input.

Preview the page.

Addons options

You are now ready to start adding your content to the page. You can add elements on to of the video lso.

Addons options

NOTE: Make sure any content you add on top of the header is high contrast so that the content is legible when the video is playing.

Using the Cover Scroll Option.

Cover Scroll allows the widget to resize the video to the browser window when the page first loads. While the viewer is at the top of the page even if they resize the browser window the video will scale much like the "Background Video" widget.

The difference comes when the user scrolls down the page. If the page is longer than the browser window, the video will stay in place at the top of the page allowing for content to show on the rest of the page without the video behind it.

Cover Scroll works well giving you a high impact full-screen video header along with content on a neutral background as you move down the page.

NOTE: you will need to ensure that your content starts far enough down the page so that when the browser is at full height the video does not cover any content when scrolling. As with most things Muse, its a case of experimenting.

Article Author: Chris Kellett

Chris is one of the worlds leading experts in Adobe Muse and skilled in all aspects of HTML, CSS and Javascript a graphic designer, animator and film producer.

A freelance web developer for 19 years with 150+ muse templates and over 100 muse widgets (and counting) for other Muse template providers under his belt.

Skills Highlight:

Adobe Muse

Coding & Development

Graphic Design & UI

Looking for Adobe Muse Widgets? Looking to for Adobe Muse Training?
Copyright © 2015 - All rights reserved