18min

Background Videos Plugin

Introduction

Background Video Plugin - Provides smooth videos for promotion on the landing page, go no further as with this plugin users can set videos as their backgrounds, with the possibility to stylize the frame, playback speed, change opacity, and more.

How to setup

1. Create a database table with a single field of type file.

Document image

2. Upload your background video in 3 file formats - .mp4, .webm and .ogv, to be compatible with all browsers.

Document image

3. Place the BackgroundVideos element on page

Document image



4. On your page set the data source URL for the plugin element from the table which you created above.

Document image

5. Done!

Note: Do not forget to deploy the database values to live.

Plugin Element Proprieties

The plugin contains BackgroundVideos visual element which should be used on page.

Document image

Proprieties fields:

  • Data source : Source of your video files PLAYBACKRATE - propriety sets the rate at which the media is being played back. The range starts from 0.25 to 5.0. The normal speed is 1.
  • MUTED - mutes the background video.
  • BACKGROUND COLOR - allows a custom background color for a Video div element.
  • VOLUME - the range starts from 0.0 to 1.0.
  • ADD A PAUSE - add a pause if needed to play the item in RepeatingGroup or Popup.
  • OPACITY - the opacity property can take a value from 0.0 to 1.0. The lower the value, the more transparent.
  • Poster - the poster is required if the video does not set to autoplay.
  • Autoplay - the video will play as soon as the page loads.
  • Enable viewport height - This option enables the height of the element to be full screen of viewport size.

The Autoplay feature does not work in the Safari browser. When the Mute feature is not enabled Autoplay does not work. The cause is - the policy of the browsers.(https://developers.google.com/web/updates/2017/09/autoplay-policy-changes)

Plugin Actions

Video Play/Stop A Background Videos - action which sets the playback of the video by playing or stopping a video.

Workflow example

  1. Create your database as showed in the How to setup the plugin
  2. Add an event on Button click to play/ stop the video using plugin action (if needed) otherwise use the plugin's element proprieties to customize the look
Document image

3. Done

Changelogs

Update: 11/01/21

  • Fixed background video issue on iOS with Safari browser

Update: 18/06/21 - Version 1.4.0

  • Fixed the problem with Safari

Update: 15/11/21 - Version 1.9.0

  • Minor changes

Update: 07/03/22 - Version 1.10.0

  • added new action "Change video background"

Demo to preview the settings



Updated 13 May 2022
Did this page help?
Yes
No
UP NEXT
360 Degree Viewer and Panorama Plugin
Documentation powered by archbee