VBM gives you the ability to add video backgrounds to any element on your page. Of course, since this is a PVII extension, you can orchestrate your animations from within a graphical user interface that installs and runs inside Dreamweaver.
VBM uses the HTML5 video tag, which is supported in all modern web browsers, as well as modern iPhones, Android phones, and tablets. Older browsers, such as IE9, will display a placeholder image of your choosing.
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.
As of CC 2015, Adobe has ceased to support its own Extension Manager. Use the PVII Extension Manager for Adobe Creative Cloud...
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.
There are several ways to access the VBM interface, but before you open the UI, you must select the element to which you want to assign a VBM instance.
Before attempting to open the VBM UI, make sure you select the DIV or other element you ish to assign the background to. VBM can be assigned to any element on your page, including the body tag. If you have trouble selecting the right element, note that VBM works in code view, as well as design view.
Select an element on your page and choose one of the 3 methods listed below to open the VBM interface:
Switch to the PVII category. VBM is the last one in the screen capture below
Switch to the PVII category. VBM is the last one in the screen capture below
Choose Insert > Studio VII > Video Background Magic by PVII
The VBM UI will open.
The VBM interface makes customizing your background easy!
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. .
If you are creating a new VBM effect, the mode will be Create. If editing an existing effect, the mode will be Modify.
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.
Enter or browse to a source video file. In order to natively support all modern browsers, the video file must be MP4 format.
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.
Choose between Fill (default) or Fit
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.
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.
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.
The optional control buttons are icons that appear at the top right edge of your video.
A single icon that will automatically change states between Play, Pause, and Replay.
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.
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.
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).
When the video ends, or is paused, it will dim (fade) out to the level of Opacity you set.
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.
This option (on by default) will automatically pause any playing video that is not in the visible viewport.
Choose from the following effects...
The system will assign a CSS filter property to your video.
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;
}
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;
}
There are 3 buttons always present in the UI:
Click OK to add your new VBM instance to your page, or to execute your edits when modifying an existing VBM instance.
Click Cancel to terminate your UI session. Nothing will be created or modified.
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:
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.
VBM comes with a suite of Control Behaviors.
The Control Actions are accessed from Dreamweaver Behaviors panel. If you do not know where this panel is, select Window > Behaviors.
Select a trigger element, such as a text link or an image. Then, in the Behaviors panel, click the plus (+) icon to open the menu. Choose:
Studio VII > Video Background Magic
There are two types of classes to choose from: Control Actions or Control All.
Select an instance of VBM by selecting its Video Background Magic ID, then Choose your Action from the Action list.
The Control All actions are powerful tools that enable you to interact programmatically with all VBM videos on your page. These actions are particularly valuable when deploying multiple VBM instances in a panel widget, such as Omni Panel Magic, or inside a hidden element on your page.
When you assign an action to a link or image, Dreamweaver assigns the action onClick, by default. For simple text or image links, this is fine. If you are assigning them to the tabs in an Tab Panel widget, for example, you should change the action to onmousedown.
You can assign multiple actions to single link or image. This is extremely useful when showing video backgrounds inside panel widgets. This will allow you, with a single mouse or touch action on the trigger, to first pause any other playing videos, and then play the one associated with the relevant panel. Just make sure that the Control All action comes first.
You can see this technique in action on the VBM Example 2 page...
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.
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
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.
When publishing to your server, make sure to upload the p7lvbm folder. The folder is created in the same folder as the page you are working on, and contains the VBM JavaScript file.
Before making a support inquiry, please be certain to have read the documentation that came with your product. Please include your Order Number, Dreamweaver version, as well as your computer operating system type in all support correspondence.
PVII maintains a Web Forum community. Go Direct to the Web Forum
E-Mail: support@projectseven.com
Phone: (336) 374-4611
Phone hours are 9:00am - 5:00pm Eastern Time U.S.