Video Intro Plugin

The video-intro plugin allows you to add a video at the top of page.

Instructions

To add a video-background to any page, simply upload an mp4 video file, and navigate to page › settings › plugins › video background and set the video source.

Video Source
If you have uploaded the video file into the same folder, then simply add the filename, for example myvideo.mp4. Optionally, you can use an absolute link to an external mp4 video file, or a root-relative path to an mp4 file in another folder. * Adding a video source effectively enables the video-background plugin.

Optional Settings

Poster
Add the name of a jpg file uploaded to the page, that represents the video. The poster image may (or may not) display before the video starts playing. Furthermore, the poster-image will be displayed on mobile devices instead of the video. If you leave this value empty, the default page preview-image will be used instead.

Tip!

If you are uploading a poster image to the same folder, you may want to "Hide Gallery" to prevent the gallery module from displaying. Optionally, you can name the poster file prefixed with _underscore (for example '_poster.jpg'), to hide it from the gallery module.*

Poster Mobile
Use this setting if you want to set a different poster image specifically for mobile devices.

Menu Style
Since the main menu is overlaying the video, we use the menu-absolute-20 style by default to make sure the menu remains visible. You can choose another style or set default/none.

Height [0-100%]
Set the height of your video-background as a percentage value of the screens visible viewport. By default, this value is set to 100, which sets the video to cover the entire visible stage area.

Autoplay
Sets the video to autoplay once it is partially loaded.

Toggleplay
Displays a small play/pause button at the bottom of the video. It is strongly recommended to keep this button enabled, for visitors with motion-disorientation, autism and for many other reasons a visitor may not wish to download- and view a video in loop.

Loop
Sets the video to loop.

Muted
Mutes the video. Ideally, background-videos should be encoded without sound.

Hide Context
A shortcut to entirely hide all the context of the page.

Hide Footer
A shortcut to hide the footer for this specific page.

Limitations

Background-video can be a useful feature, but there are many limitations you should to be aware of.

  • Does not work on mobile
    Unfortunately, the video-background does not work on mobile devices for several reasons. Instead, there is a fallback for mobile devices. * See details in mobile fallback section below.
  • Video Cropped
    As you may understand, for a background video to display nicely at any height, on any device, on any screen aspect, the video may be cropped appropriately to 'fit' the designated stage area.
  • Does not work for sidebar layout
    Because of the huge technical difference of this layouts, the video background plugin currently only works for the topbar- and slidemenu layouts.
  • H.264 encoded mp4 format
    Video in HTML5 is limited by various file formats and codecs. To be sure that your video displays properly across all browsers, the video should be encoded in H.264 codec, in mp4 format [ref].
  • 2MB Upload Limit
    Your host may have a 2MB upload limitation, in which case you would need to upload large video files by FTP into appropriate folders.
  • Browser remembers play-state
    If a visitor clicks to "pause" the video, the video will also be paused next time the page loads. This is just common sense.
  • Results of slow internet
    If your video file is large, and the visitor is on a relatively slow connection, they may see the video start- and stop frequently while buffering.
  • Autoplay disabled
    Some visitors have simply disabled autoplay from their browser, in which case the video simply won't autoplay.
  • Loop stitch
    Don't expect the video loop to stich seamlessly on all browsers, even if your video is made to do so. Depending on the browser, it might take several milliseconds before the video starts re-playing.

Mobile Fallback

For several obvious reasons, background-video will not display for mobile devices, and will instead display the poster image (or poster-mobile image), which is an acceptable fallback.

  • Most mobile devices (including iphone/ipad) do not allow autoplay, mainly to prevent unsolicited cellular download. There is no "fix" for this.
  • Even if the video was loaded in pause-mode, clicking the native play button would open the video in a player-window, so it wouldn't be a background video.
  • A video may require too much bandwidth, and will often stutter on mobile.

Recommendations

The background-video plugin is intended to be used as a motion-background to compliment the page content. Don't use video just because you can or because it looks nice. We recommend using a short, subtle video loop, without sound, lasting only a few seconds, and compressed at acceptable file size.

Useful links

http://thenewcode.com/777/Create-Fullscreen-HTML5-Page-Background-Video#considerations
http://www.sitepoint.com/designing-with-video-backgrounds
http://www.punkchip.com/autoplay-is-still-bad-for-all-users