How to Add Video Backgrounds to the Layers Slider Widget

How To  Product Guides  Since: 1.4 Last Updated: Layers ver. 1.6 Time to Read: 5 minutes

Video Background are a special feature added to the Layers Slider widget with Layers Pro.  It allows you to add media from YouTube or Vimeo, or use an .mp4 file you upload to your server.

To access the Background Video controls, click the background button on the Slide toolbar:

videobg_options

Here you can choose YouTube, Vimeo or Self-Hosted.

Each of these options offers pros and cons, with Self-Hosted being your best option.

This is the recommended way to go, as it offers you the absolute most control over your video and uses your browser’s HTML5 video support to ensure responsive video that always fills the slider.

Pros

  • Self-hosted files do not require additional requests to a third party website. This ensures faster loading of your page.
  • Self-hosted files can be created in a full-screen size and aspect ratio that fits your website more appropriately.
  • You can control the behavior of your video more directly, such as looping, muting and file size.

Cons

  • Files are subject to your WordPress install file upload limit, which in most cases is 10MB. See solutions below if you have a larger file.
  • You do not have the fancy controls provided by Vimeo or YouTube accounts that allow you to tweak the player, appearance or behavior of the video – this must be done by you in the editing process

Converting Your Video File

Video backgrounds require an mp4 file for cross-browser compatibility. If you have an ogv, webm, avi or other format, you will need to convert the file.

  • You can do this in any modern video editing software, or use a website such as this one.
  • For best results, use video that is ambient or intended as full-motion design elements. See our demo here.
  • Self-hosted Background video will not have any player controls and will loop until the user navigates to another slide or page. Use discretion when adding sound to the video for this reason.
  • Your host may limit the max file size you can upload to WordPress. See How to Increase the File Size Upload Limit in WordPress if you encounter problems uploading large files.
  • Make sure the video clip has a lowercase filename
  • Use hi-res videos of 720p when possible. They may be viewed on large desktop screens (1920 pixels wide) and smaller videos will pixelate if not HD.
  • Keep your videos short – 1-5 minute clips are best and should loop cleanly for best results. This also keeps the file size down so it can be uploaded to WordPress.
  • Consider removing sound from your videos unless it is integral to your site’s experience to avoid annoying your visitors

Note that self-hosted videos will not have any controls available to the user other than what the browser supports in the right-click context menu on the browser tab!

Setup the Background

  1. Click the Background icon in the Slide Option toolbar
  2. Select Self Hosted in the Background Video drop-down
  3. Upload your videos by clicking on Choose mp4 file.

Layout

Self-hosted video works great in any mode. Self-hosted video will fill the entire slider and NOT scale the player by width. For instance, on a mobile screen that is 320px wide and supports HTML5 video, your visitor will see the center 320×480 portion of the video. This is why you should not use presentational videos or video with embedded text as a background fill on the slider, but stick with full motion graphics. ambiental or other scenic-type video.

For best results, we recommend using the Full Screen layout.

Slider

In the Slider design bar control:

  • Auto-Height only applies to your content, not the video background
  • Video backgrounds require fast loading for a good user experience. Ensure your server is up to the task. We recommend autoplay not be used with video backgrounds if you notice lagging. This can be caused by the video loading holding up the script.

Pros

  • oEmbed delivers a responsive player tailored to the visitors’s screen size
  • oEmbed will automatically determine the appropriate quality to begin streaming, depending on the visitor’s bandwidth.
  • Videos you host on your YouTube account can be customized for autoplay etc.

Cons

  • For videos you don’t host on your own YouTube account, you cannot customize the player with URL attributes
  • You cannot control the quality or availability of videos that are not hosted on your account.

Setup The Background

  1. Click the Background icon in the Slide Option toolbar
  2. Select YouTube or Vimeo in the Background Video drop-down
  3. Copy the url from the address bar of the video or Enter the video Share URL into the Video URL field. Example:
    https://vimeo.com/144365464

videobg_options

Video Background Basics:

  • Use only one slide when working with YouTube or Vimeo urls or the video will not autoplay
  • Background video will fill the widget, however the video player will conform to the slider dimensions. This means your browser or screen size will dictate the width. If a slider height is set in combination with the Full Width or Boxed layout, you will see black bars on the video until the mobile modes kick in. Using the Full Screen layout works best.
  • If you want a fully responsive video, use the Featured Media option and not the video background option.
  • URL attributes are not supported by oEmbed. We will be adding more customization control for hosted video in future updates of Layers Pro

Layout

oEmbed video works great in any Layout. However, getting the player to fill the slider without black bars on YouTube videos requires you to use some trial and error to get the slider to fit the aspect ratio of the player just right when using boxed . (We do not recommend Full Width with YouTube)

For best results, we recommend using the Full Screen layout with 16:9 videos.

Slider

In the Slider design bar control:

  • Auto-Height only applies to your content, not the video background
  • Video backgrounds require fast loading for a good user experience. Ensure your server is up to the task. We recommend autoplay not be used with video backgrounds if you notice lagging. This can be caused by the video loading holding up the script.
  • If using Boxed  want to avoid vertical bars, add a Slider Height value of 560px for 16:9 videos and ensure the original is 720p or higher (1280 x 720)

It is important to understand the difference between slider Backgrounds and slider Featured Media. Slider backgrounds are not fully responsive by default and are not linkable, which is why they should not contain embedded text and not be used to display images as a gallery. See our Tutorials for how to setup photo sliders or customize background scaling to ensure your content remains mobile-friendly.

Layers Slider Widget

How to Embed Audio & Video with Layers