How To Add Background Video With Adobe Muse

Adding the Video To Adobe Muse

Screenshot from Muse


The really interesting aspect of Adobe Muse is that it allows you to create web pages using a similar workflow to that used to lay out publications. You don’t need a deep understanding of the code that builds a site or page but familiarity with HTML5, CSS and JavaScript won’t hurt.

Though traditional web video is usually added through the use of the HTML5 Video API, Adobe Muse accomplishes the same thing through what it calls “widgets”. Widgets create the HTML 5 required for specific tasks but use a plain-language interface in Muse to write the code when the page is published.

In this exercise, we are going to use a widget which you can download, for free, from Muse Resources. When the widget downloads, all you need to do is to open the .zip file and double-click the .mulib file in the Full-Screen Video folder. This will install it into your copy of Adobe Muse.

How To Prepare A Page For Background Video in Adobe Muse CC

Muse screenshot


With the widget installed, you can now create the page that will use the video.

Before you start, create a folder for your Muse site. Inside that folder create another folder – we use “media” – and move your mp4 and webm versions of the video into that folder.

When you launch Muse select File>New Site. When the Layout dialog box opens select Desktop as the Initial Layout and change the Page Width and Page Height values to 1200 and 900. Click OK.

Double click the Master Page in the Plan view to open the Master page. When the Master Page opens move the Header and Footer guides to the top and the bottom of the page. You really don’t need a Header and Footer for this example.

How To Use The Fullscreen Background Video Widget in Adobe Muse CC

Muse screenshot


Using the widget is dead simple. The first thing you need to do is to return to the Plan View by selecting View>Plan Mode. When the Plan View opens double click the Home page to open it.

Open the Library panel – if it isn’t open on the right side of the Interface select Window>Library – and twirl down the [MR] Fullscreen Background Video folder.  Drag the widget to the folder to the page.

You will notice the Options ask you to enter the names of the mp4 and webm versions of the videos. Enter the names exactly as they are spelled in the folder where you placed them. One little trick to ensure you don’t make a mistake is to copy the name of the mp4 video and paste it into the MP4 and WEBM areas of the Options menu.

One other trick: All this widget does is to write the HTML 5 code for you. You can tell this because you see <> in the widget. In this case, you can place the widget off of the web page on to the pasteboard and it will still work. This way it doesn’t interfere with any content you will place on the page.

How To Add Video and Test A Page In Adobe Muse CC

Muse screenshot


Though you have added the code that will play the videos, Muse still doesn’t have a clue where those videos are located. To fix this, select File> Add Files For Upload. When the Upload dialog box opens navigate to the folder containing your videos, select them and click Open. To ensure they have been uploaded, open the Assets panel and you should see your two videos. Just leave them in the panel. They don’t need to be placed on the page.

To test the project select File>Preview Page In Browser or, because this is a single page, File>Preview Site In Browser. Your default browser will open and the video – in my case a tropical rainstorm – will start playing.

At this point, you can treat the Muse file as a regular web page and add content to the Home page and the video will play underneath it.

How To Add A Video Poster Frame In Adobe Muse CC

Muse screenshot


This is the web we are talking about here and, depending on the connection speed, there is a good chance your user may open the page and be staring at a blank screen while the video loads. This is not a good thing. Here’s how to deal with this bit of nastiness.

It is a “Best Practice” to include a poster frame of the video, which will appear while the video loads. This is usually a full-size screen shot of a frame from the video.

To add the poster frame click once on Browser Fill at the top of the page. Click the Image link and navigate to the image to be used. In the Fitting area, select Scale to Fill and click the Center point in the Position area. This will ensure the image will always scale from the center of the image when the browser’s viewport size changes. You will also see the image fill the page.

Another little trick is to at least a have a solid-not white- fill color just in case the poster frame takes a while to appear. To do this click the Color chip to open the Muse Color Picker. Select the eyedropper tool and click on a predominant color in the image. When finished, click on the page to close the Browser Fill dialog box.

At this point, you can save the project or publish it.

The final part of this series shows you how to write the HTML5 code that slides a video into a web page's background.

Was this page helpful?