Skip to main content Skip to navigation
Web Communication WSUWP Video Backgrounds

WSUWP Video Backgrounds

Plugin overview

WSUWP Video Backgrounds is a WordPress plugin to help display a video background on an HTML element using videoBG jQuery. This is not enabled by default on the WSUWP platform, but is available for all site administrators to enable as needed.

A Shortcode is used to attach video files as the background to a given HTML element.

[wsu_video_background] – Attach video backgrounds to an element

The [wsu_video_background] shortcode will not add any output of note to a web page without populating some default attributes. Proper use involves specifying one or more videos

[wsu_video_background id="custom-video-bg" mp4="file1.mp4" ogv="file1.ogv" webm="file1.webm" poster="file1.jpg"]

The shortcode above creates a div element in the page with an ID of custom-video-bg. It then attaches one of the provided video files as a background to that element depending on the browser support. If a matching file is not available for the browser, it falls back to a static image in file1.jpg.

The same can be done without creating an additional HTML element so that the background can be attached to an existing part of the page.

[wsu_video_background id="created-video-bg" mp4="https://url/to/file1.mp4" ogv="https://url/to/file1.ogv" webm="https://url/to/file1.webm" poster="https://url/to/file1.jpg" script_only="true"]

This relies on you to add the custom-video-bg ID to an element so that the included JavaScript can properly add the video.

Additional options available as attributes:

  • autoplay – true/false
  • loop – true/false
  • scale – true/false
  • zindex – 0
  • opacity – 1

Caveats

This plugin can be fairly tricky and the original library it is based on is no longer supported. Here are a couple tips that may help.

  • Your best bet is to ensure that a webm version of the video is available. All modern browsers will prefer this.
  • Always make sure a poster image is available. Many mobile devices will fallback to this.
  • Use CSS to define the size of the area the video will load in. By default, it may not appear at all. In the above example, I applied a manual height of 300px to the wsu-video-background element so that it would work.

Please open any issues or feature requests on the repository.