Skip to main content Skip to navigation

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.

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.