Once you’ve setup your slide’s main settings, you can add additional content to the slide such as Text/HTML, Images and Video. This section will cover how this can be accomplished.

 

Slide (visual preview + layer management)

 

Text/HTML Layer (including shortcodes and buttons)

When adding a basic Text/HTML layer, you can enter simple text or raw HTML. You can also paste in a shortcode from another plugin (not all shortcodes from other plugins are compatible, but most will be).

Special Note: Raw JavaScript/CSS/PHP should not be included here.

Basic Text

Raw HTML

Buttons

 

Shortcodes

Image Layer

HTML5 Video, YouTube & Vimeo

The slider supports local HTML5 Video (video you upload to your own website), YouTube and Vimeo. For a good starting point, import one of the video demos.

HTML5 Video

To add an HTML5 Video, first upload the video to your website (sometimes this can be done from within the WordPress Media section, but often videos are too large and need to be uploaded via ftp).

Almost all browsers support “mp4” for HTML5 Video playback. The one exception is Firefox on Apple Macs, where an alternative video file is required. Alternative video formats are “ogv” (Theora) and “webm”. If you have a video encoding program, there may be an option to create one of these formats. Otherwise, here’s a free program you can use.

You’ll only need one alternative video file for Firefox on Apple Macs (either “ogv” or “webm”). If you’ve added the video to the slider, and it isn’t working, it’s possible your server isn’t setup to support these file types. Click here for more information about how you can add support for these file types to your website.

Special Note: Most mobile devices including iPhone/iPad do not allow autoplay for audio or video (they do this to try and save battery life). Because of this, use a “Poster Image” as the video’s preview.

  1. Poster Image Url: The preview image for the video. This is optional, but is highly recommended for mobile.
  2. Video MP4 Url: The absolute url to the “mp4” version of the video (required).
  3. Video WEBM Url: The absolute url to the “webm” version of the video (see notes above).
  4. Video OGV Url: The absolute url to the “ogv” version of the video (see notes above).
  5. Full Width: Choose to display the video at “100%” width.
  6. Width: For accurate resizing enter the video’s original width here.
  7. Height: For accurate resizing enter the video’s original height here.
  8. Cover: Make the video cover the entire size of the slider (similar to the Background Fit -> Cover setting for a slide’s main background image).
  9. Loop Video: Choose automatically restart the video when it ends.
  10. Autoplay: Start the video as soon as it appears inside the slider (not available for mobile devices, see notes above).
  11. Next Slide on End: Automatically navigate to the next slide when the video ends.
  12. Force Rewind: Force the video to rewind to the beginning if the user manually navigates to another slide.
  13. Hide Controls: Choose to hide the video players controls.
  14. Mute: Automatically set the video’s volume to 0.

 

YouTube / Vimeo

To add a YouTube or Vimeo video, visit the video on YouTube.com or Vimeo.com, and copy the video’s ID from the browser’s address bar:

Special Note: If you have a Vimeo Pro account, and the Vimeo video is “private” and can’t actually be loaded directly from Vimeo.com, from your Vimeo account, set the video to “public”, then add the video, and then after saving the slider, go back to your Vimeo Pro account settings and set the video to “private” again.

 

Next, select either “Youtube” or “Vimeo”, enter the video’s ID, and click the “Search” button:

 

Special Note: YouTube and Vimeo videos will always “fit” the video to display within the allotted space. Because of this, if you need your video to always cover the entire size of the slide, use HTML5 video with the “Cover” option instead.

  1. Full Width: Choose to display the video at “100%” width.
  2. Width: For accurate resizing enter the video’s original width here.
  3. Height: For accurate resizing enter the video’s original height here.
  4. Loop Video: Choose automatically restart the video when it ends.
  5. Autoplay: Start the video as soon as it appears inside the slider (not available for mobile devices, see notes above).
  6. Next Slide on End: Automatically navigate to the next slide when the video ends.
  7. Force Rewind: Force the video to rewind to the beginning if the user manually navigates to another slide.
  8. Hide Controls: Choose to hide the video players controls.
  9. Mute: Automatically set the video’s volume to 0.
  10. Preview Image: Add a custom preview image to be displayed instead of the YouTube/Vimeo default preview image.
  11. Arguments: Optional Youtube/Vimeo embed options.
    click here for YouTube options, and click here for Vimeo options. Use the following format for custom arguments:
Share This :