Make a video header

5 minutes to complete this task.
Adding a video header is very simple in Muse especially when using a widget. 5 minutes to complete this task.

Get the video header widget here:

Click on the link below to get the video header widget.

DOWNLOAD March 2015 Downloads Pack

Video headers are a great way to add a layer of interest that cannot be achieved with sliding images or static images.

Take a look at a video header in this months learning template here >

Video headers are usually 100% width with a fixed height. You can also use video headers the fill the entire browser on loading the page but scroll out of the way when the user scrolls further down the page. This particular method is trending at present so you may want to follow the trend with your own designs.

For this process, we will use the "Header Video" widget that forms part of this month's downloads.

Step One:

Drag the "Header Video" widget onto the page canvas. It should already be 100% width, if not then with the widget selected click the 100% width button.

Step 1

Make sure the "Cover Scroll" option is off if you want to have a fixed height header.

Use the transform tool or just drag the widget to the height you want to set it.

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.

Step 2

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. You are now ready to start adding your content to the page. You can add elements on to of the video as well.

Step 3

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