How to create a full screen video header with auto centered content.

20 minutes to complete this task.
In this video we show you how to setup a neat video header that fills the full height and width of the browser whilst still mantaining page scroll. 20 minutes to complete this task.

Cool video headers

Build an clean fullscreen video header that scales with the browser and maintains the ability to alle the page to be scrolled.

You will need:

A blank Muse site (just use the presets for the desktop)

The Cover Video widget Installed

Get the widget

There are some excellent examples of fullscreen video sites out there I like Vimeo's use of background video.

See the website (Correct at time of publishing).

Vimeo Example

See website (Correct at time of publishing).

Sunrise Example

How to..

So how do we go about producing a design that has a fullscreen video header that scales to fit the full height and width of the browser? One that also allows for always centered header content, that still allows for scrolling.

Well? You use our new cover video widget.

Watch the video and see just how easy a 123muse widget makes this complicated task. Our new cover scroll enabled video player gives you everything you need to create beautiful video header pages.

This latest version of our popular video products adds the ability to have centered content that maintains its position dead center on top of the background video and is fully editable Muse content.

In addition to center focused content, the new widget makes it possible to show sticky elements at the base of the browser window that maintain their position even when the viewer resizes their browser.

These elements fade away when the user scrolls down the page. The widget is device compatible (shows poster image instead of video on devices), responsive and super easy to setup.

This amazing new widget makes a complicated task effortless.

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