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

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.

Disable for mobile devices
Disable the video intro for mobile devices, and instead displays a normal image. Useful if your video does not look nice when cropped in mobile device screen aspects.

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 (no audio). This setting is required for autoplay on mobile devices.

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.

Show Scroll Button
Adds a "down" button at the bottom of video intro, which hints to the visitor that there is more content below the intro. When the button is clicked, the page will scroll to the bottom of video, effectively displaying the content below. This feature is useful for intro's set to 100% height, when it's important that the visitor is made aware that there is more page content below the video.* The button will appear one second after page intro loads.

Limitations

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

  • Autoplay limitations
    Some visitors may have disabled autoplay in their browser, in which case the video simply won't autoplay. Furthermore, many old mobile devices don't allow autoplay. To allow mobile devices to autoplay video, you must have the "muted" setting checked.
  • 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.
  • 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.

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

thenewcode.com/777/Create-Fullscreen-HTML5-Page-Background-Video
sitepoint.com/designing-with-video-background
punkchip.com/autoplay-is-still-bad-for-all-users

Slideshow IntroComparison Slider