Raw WordPress Theme Documentation

Adding Background Video

Description

This section describes how to add a fullscreen background video. The steps described below are valid for both the homepage and projects.

Usage

Background videos are created using the [epicslider_background_video] shortcode which is entered into the caption field in the media uploader. For example:

IMPORTANT: You must set a unique id and include three versions of the video you want to display to ensure cross browser compatibility.

File Formats

The full width slider uses html5 video and to ensure cross browser compatibility you will need to include the following file formats for your video:

  1. mp4/m4v
  2. webm
  3. ogg

 

There are a bunch of free video converters that will allow you to convert your video to the required formats, one such converter is Easy HTML5 Video Converter (http://easyhtml5video.com/).

File Format Broswer Support

Broswer MP4/m4v WebM Ogg
IE 9 and 10 YES NO NO
Chrome YES YES YES
Firefox NO YES YES
Safari YES NO NO
Opera NO YES YES

Step.1

Click ‘Add Media’ .

add-media

Step.2

Click ‘Upload Files’ then ‘Select Files’ and select one or more images that will serve as poster images for the fullscreen background video.

upload-images

Step.3

Go through each image and add the epicslider background video shortcode to the caption fields and make sure that ‘Display Opt.’ is set to ‘Display in Featured Slider’ as shown below.

background-video

NOTE: If only one image is set to ‘Display in Featured Slider’ the slider controls will be hidden and the slider will display a single slide. If more than one image is set to ‘Display in Featured Slider’ the slider and controls will be activated and serve as a regular slider. As with a regular full width slide you can add captions. For caption styles and examples click here. Once done, close the modal.

Step.4

Scroll down to the bottom of the editor and set page layout to ‘Full Width Featured Media’.

page-layout-full-width-featured-media

Step.5

Click Publish. Repeat Step 1. to Step 5. to add additional slides.