Video Background Magic (VBM)

Installing VBM

Extension installer files come in 2 formats: MXP and ZXP. MXPs are supported by Extension Manager versions MX, MX2004, 8, CS3, CS4, CS5, CS5.5 and CS6. ZXP is supported by versions CS5.5 and higher. Version CC and higher have dropped support for the MXP format. To continue to support all Adobe customers, regardless of version, we include both the classic MXP and the new ZXP versions.

Dreamweaver CC 2015 (and higher) Extension Installation Information

As of CC 2015, Adobe has ceased to support its own Extension Manager. Use the PVII Extension Manager for Adobe Creative Cloud...

Dreamweaver CC 2017 Advisory

Creative Cloud Users: PVII Extensions work with all Creative Cloud versions—including CC 2017. You do need to use the PVII Extension Manager as Adobe has dropped support for its own Extension Manager. The PVII Extension Manager is free. Download it here. Also note that Adobe has published a list of bugs in CC 2017. More about CC 2017 bugs.

PVII Extension Manager for Adobe CC
( Windows and Mac)

Download and Install Instructions

VBM Interface: Options & Settings

The VBM interface makes customizing your background easy!

The VBM Interface

The VBM UI allows you to easily define and configure VBM instances, one at a time, and once configured, the UI can be used to modify (edit) each instance as often as you like. .

Mode

If you are creating a new VBM effect, the mode will be Create. If editing an existing effect, the mode will be Modify.

Apply to Element

The selected element (tag) that the VBM instance is (or will be) assigned to. Make sure this is the element you want. If not, click Cancel and then select the relevant tag using the Tag Selector Bar. Tags can be selected in either Code or Design View.

Video File Path

Enter or browse to a source video file. In order to natively support all modern browsers, the video file must be MP4 format.

Fallback/Poster Image Path

One of the allowable attributes on the HTML5 video tag is poster. The poster is an image that displays if the video does not load or if the browser/device does not support HTML5 video.

 

Options

Scaling Method

Choose between Fill (default) or Fit

Fill

The Fill method will cause the video to fill the entire element to which it is assigned. The VBM script will zoom the video in until all 4 sides completely fill the assigned element. This is the default method and will usually provide the best results from a design standpoint.

Fit

The Fit method will fill the entire width of the assigned element, but the video will not be zoomed. In some cases, you might want this effect. For example, if your video is alpha transparent (a feature in some advanced video editors), this method might be desirable. Note that depending on your video's natural aspect ratio, and the amount of content in the target element, this method will sometimes result in the video being markedly shorter than the target element.

Play Mode

The available play modes are self-explanatory. Choose Auto Play if you want your video to start automatically. Select Loop, Play Continually, and Number of Loops to suit.

Control Buttons

The optional control buttons are icons that appear at the top right edge of your video.

Pause/Play/Replay

A single icon that will automatically change states between Play, Pause, and Replay.

Volume/Mute

Select this option if your video has an audio track. According to best practices for usability, all videos will begin muted. The user can then click or tap the Volume/Mute icon to toggle sound on and off.

Color

Choose White, Black, or Inherit for your icon color. If you choose Inherit, your icons will inherit the link color or text color set in your style sheet for your target element.

Transition Fade

VBM allows you to set your video to fade In, Out, and Between Loops, which is a great feature if your video was not designed for seamless looping. You can also set the fade Duration. The higher the number, the slower the effect. The Duration option applies to all 3 types of fades (In, Out, and Between Loops).

Dimming

Dim When Not Playing

When the video ends, or is paused, it will dim (fade) out to the level of Opacity you set.

Accessibility

Suppress on Mobile Devices

With this option enabled, your video will not display on phones. Instead, the Poster (placeholder) image will show. If you have not set a Poster image, then nothing will show.

Pause When Not in View

This option (on by default) will automatically pause any playing video that is not in the visible viewport.

Styling Effects

Choose from the following effects...

In the drop down list: Grayscale, Sepia, Blur

The system will assign a CSS filter property to your video.

Rounded

Your video will be assigned a class of vbm-rounded. The default border-radius is 6px. If you want a different radius, you can edit the following CSS rule in your VBM style sheet:

.vbm-rounded,
.vbm-rounded video {
border-radius: 6px;
}

User Class

If you want to customize your video, you can assign your own custom User Class. Simply enter the class name in the box. The only restriction is that your name cannot include the character string "vbm". For instance, if you set a User Class of vid-02, the class will be assigned to the video wrapper, which will look something like this:

<div id="p7VBM_2" class="p7VBM vbm-wrapper vbm-noscript vbm-grayscale vid-02">
<video autoplay muted playsinline type="video/mp4" poster="../vids/poster-pulse.jpg">
<source src="../vids/pulse.mp4">
</video>

You can then build your own CSS classes for the video wrapper:

.vbm-wrapper.vid-02 {
background-color: teal;
}

Or the video itself:

.vbm-wrapper.vid-02 video {
opacity: 0.5;
}

Command Buttons

There are 3 buttons always present in the UI:

OK

Click OK to add your new VBM instance to your page, or to execute your edits when modifying an existing VBM instance.

Cancel

Click Cancel to terminate your UI session. Nothing will be created or modified.

Help

Click the Help button at any time to open this user guide.

If you are editing an existing VBM instance, a fourth button will appear:

Remove

Click the Remove button to remove the current VBM instance. If it is the only VBM instance on your page, the link to the VBM JavaScript and CSS files will also be removed.

Tips

Limit the total size and length of your video

You should limit the length of your videos to 30-40 seconds at the most. Design them to loop seamlessly or utilize the Fade on Loop option that comes with VBM.

Avoid excessive movement

Excessive motion attracts focus to the video and takes it away from the words. Background videos should be subtle and smooth. If you do not have video editing capabilities, you should purchase your videos from a reputable source such as Shutterstock. If you'd like to explore free video possibilities, the source for our video might be just what the doctor ordered: Pixabay

Offer a pause button

No matter how great and subtle you think your background video is, there will be people who'd rather pause it. Whether it be because it's distracting them, they feel it's slowing down their computer, or they don't expect it to pause by itself.