Introduction

Thank you for purchasing the Joomla Fullscreen Video Background module!

Fullscreen Video Background is a Joomla module that lets you add beautiful full-screen backgrounds to your site. This documentation will help you understand the requirements and usage of the Fullscreen Video Background module. It covers installation, usage, and support.

Fullscreen is a great tool to incorporate into your website but remember that it is just a tool and how you use it will also affect your results. Adding a video background to every page is not recommended. As the old cliché goes “with great power comes great responsibility”.

Please read this documentation for more information on how to use Fullscreen Video Background and its options.

Requirements

You do not need to be a web developer to install or use Fullscreen Video Background.

Fullscreen Video Background requires Joomla version 3.x and 4.x and newer. Older versions have not been tested.

Installation

To Install the Fullscreen Video Background Module, please follow our step by step guideline::

• Step1: Download the Fullscreen Video Background in your local machine (Computer).
• Step2: Login to the administrative area of your Joomla website.
• Step3: Go to Extensions Manager from top menu: Extensions( or, Extensions Manager ) -> Manage.
• Step4: Now find Browse(Choose File) button under Upload & Install Joomla Extension and hit the Browse button, browse to the location of downloaded Fullscreen Video Background Module(zip file) on your local computer, and press the Upload & Install button.
• Step5: When you install the extension successfully, go to: Extensions ( or, Extensions Manager ) >> Modules (or, Module Manager).
• Step6: Now Config Your Module
• Step5. After Complete configure the extensions hit Save & Close button.

Joomla Fullscreen Video Background Module has lots of options. You will find them from the Module Settings tab.

To Basic configure the Fullscreen Video Background, please follow our guideline:

• Step1: Go to Extensions Manager from top menu: Extensions ( or, Extensions Manager ) -> Modules ( or, Module Manager ).
• Step2: Find the Fullscreen Video Background and enter.
• Step3: Set Module Position from the drop-down list.
• Step4: Set Module Status Published.
• Step5: Select menu from Menu Assignment Tab.
• Step6: Now Add Your media.
• Step7: Now explore all settings tab and configure them as your own demand. Please read option tooltip information carefully for configure.
• Step8: Now Save and enjoy.

All Options

Description of all available options of Fullscreen Video Background for Joomla.

In this section, labels are used to help understand the usage. When an option has a label it means that option is available for that particular type of background only.

During Module configure please read settings option tooltip information carefully to properly understand the option.

Basic Settings

• Media Player Type:
  Select what type of media you will be using for the background. Available options are YouTube, Vimeo, Dailymotion, Wistia, HTML5, Image, or Color. Default is YouTube.
• Video ID:
  For YouTube, Vimeo, Dailymotion, and Wistia please enter the video ID only. For most video hosting sites the video id is placed at the end of the URL of the video’s hosted web page.
• Video URL:
  For HTML5 Video enter the video’s URL location: i.e. https://mywebsite.com/media/myvideofile.mp4

  For cross-browser compatibility for HTML5 videos make sure you have the file versions MP4, WEBM, & OGV in the same location. If you do not have all three files in the same location some browsers will not play the video if they don’t support it. Learn more about HTML5 video browser support.

• Upload Image:
  Upload a Background image with appropriate dimension.
• Media Overlay:
  Enable or disable displaying an overlay pattern or overlay color over the media. Enter ‘No’ to disable or ‘Yes’ to enable. Default is ‘Yes’.
• Overlay Pattern:
  Select a suitable Pattern for the background. Experiment with the available patterns as some will look better on some media backgrounds than others.

  Remember that if you prefer not to use an overlay pattern but still want to use an overlay color then select ‘Transparent ‘ and in the option Overlay Color select the color code you want for the overlay.

• Overlay Color:
  Select the color you want to use for the overlay.

  Remember that if you prefer no overlay pattern but still want to use an overlay color then select ‘transparent’ in the Overlay Pattern.

• Overlay Color Opacity:
  Enter the Opacity you want to use for the overlay color.
• Custom Style:
  If you need additional CSS please write here.

Background Settings

• Auto Play:
  Automatically play the media.

  Auto-Play has changed in WebKit browsers such as Safari 11 and the new Chrome since 2018. Videos and audio media will not play automatically unless they are muted by default. This setting can also be changed on the browser by the user to not play any media at all or allow to play all media. The default is to allow only media that is muted. Anything else will need user interaction to play or hear the sound. So depending on the user’s browser settings the auto-play feature may not work at all. You can read a little more at the WebKit website.
  
  Fullscreen Video Background detects when a browser has these settings on and will mute the video before playback so it can auto-play muted. If the user’s browser is set to not play media files at all then Fullscreen Video Background will simply not start playback until the user clicks the play button. What else can you do? Well, you can also set your backgrounds to not auto-play or mute them to ensure they will play although without sound until the user clicks on the mute button.

• Start At:
  Enter the start time in seconds that you would like the video to start at. Default is 0.
  
  Each minute is 60 seconds so if you have a video that lasts 2:35 minutes and you want it to start at 1:05 then you will enter 65 (60 + 5).
• End At:
  Enter the end time in seconds that you would like the video to end at. Leaving it at 0 lets the video play in its entirety. Default is 0.
  
  Each minute is 60 seconds so if you have a video that lasts 2:35 minutes and you want it to end at 2:15 then you will enter 135 (60 + 60 + 15).
• Delay By:
  Enter the time in milliseconds to delay displaying the background. (1000 ms. = 1 sec.). Default is 0.
• Loop:
  Enter NO to disable or Yes to enable loop play. Default is 1. If not looping the media, it will stop at the end or you can choose to rewind the media to the beginning without playing it again with the ‘Rewind To Start At’ option.
• Rewind To Start At:
  If not looping the media, this module can rewind the media to the beginning without playing it again. Enter ‘NO’ to disable or ‘Yes’ to enable. Default is ‘NO’.
• Media Start Fade In:
  Allow for the media to be faded-in once playback has started. Default is ‘NO’.
• Media End Fade Out:
  Allow for the media to be faded-out once playback has ended. Default is ‘NO’
• Audio:
  Enter ‘NO’ to disable or ‘YES’ to enable playing the video with audio. Default is ‘Yes’.
• Start Audio Muted:
  Enter ‘NO’ to disable or ‘Yes’ to enable. When enabling the media will start with the audio muted. Default is ‘NO’.
• Volume Level:
  Adjust the volume level of the video. Enter between 0-100, 0 is no volume (0%) and 100 is full volume (100%). Default is 100.
• Media Link:
  Enter the URL to link the media background too.
• Media Link Target:
  Select to open the link in a new window or the same window.

Page Settings

• Page Up Down:
  Page-Up-Down (PUD) allows the page to be scroll up and down to have a better view of the media.
  Enter NO to disable or Yes to enable. Default is Yes.
• PUD Element:
  The HTML id name or class name of the element to use for the PUD option (i.e. #wrapper or .container). This element will be what gets scrolled up and down when PUD is enabled. Default is #page.
• PUD Down:
  Enable to scroll down the PUD Element when the media playback starts. Enter NO to disable or Yes to enable. Default is NO.
• PUD Up:
  Enable to scroll up the PUD Element when the media playback ends. Enter NO to disable or Yes to enable. Default is NO.
• PUD Show:
  Amount of the PUD PUD Element to show in pixels when PUD is in the down position. This keeps part of the PUD Element in view such as to show the logo and/or navigation during the PUD down status, it depends on the content inside the selected PUD Element.
  
  Enter the value in pixels (i.e. for 145px you will enter 145). Default is 0.
• Fade In Out:
  Fade-In-Out (FIO) lets you set an opacity (transparency) effect for a better view of the media background.
  Enter NO to disable or Yes to enable. Default is Yes.
• FIO Element:
  The HTML id name or class name of the element to use for the FIO option (i.e. #wrapper or .container). This element will be what gets the opacity applied too when FIO is enabled. Default is #page.

  Recommended to use the same HTML element as PUD but it is not necessary. You may select any HTML element you see fit for your desire outcome.

• FIO Opacity:
  Set the amount of opacity for the FIO Element. Acceptable values are 0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1. Default is 0.5.
• FIO Start:
  The FIO Element will fade-out when the media playback starts. Enter NO disable or Yes to enable. Default is NO
• FIO End:
  The FIO Element will fade in when the media playback ends. Enter NO to disable or Yes to enable. Default is Yes.
• Enlarge By:
  Use with caution, enlarge only what is necessary. Useful for hosted videos such as YouTube and Vimeo to hide unwanted objects. Remember that the more you enlarge the video the more chances it may lead to choppy video play.
  Enter the value in percentage (i.e. for 10% you will enter 10). Default is 0.
• Page Visibility Pause:
  Allows the media to be pause when the user minimizes the browser or moves to another window tab. Enter NO to disable or Yes to enable. Default is Yes.

Controller Settings

• Display Controls:
  Display the play, audio, & PUD button. Enter NO to disable or Yes to enable. Default is Yes.

  Color backgrounds do not display the controls.

• Controls Location:
  The location to place the controls on the screen. You can select to place the controls on the bottom right, bottom left, top right, or top left of the page.
• Control Color:
  Color for the control buttons.
• Control Color Opacity:
  Opacity for the control buttons Color.
• Control Background Color:
  Color for the control background.
• Control Background Color Opacity:
  Opacity for the control background Color.
• Enable Scroll To Top Button:
  Display scroll-to-top button in the controls panel. Default is Yes.

Responsive Settings

• Disable On All Mobile:
  Do not allow any of your Fullscreen Video Background to be displayed on any mobile device.
  Enter NO to disable or Yes to enable. Default is NO.
• * Disable On Mobile Video Only:
  Do not display video and audio backgrounds on mobile devices by enabling this option. Image and color backgrounds will still play on mobile devices
  Enter NO to disable or Yes to enable. Default is NO.
• Disable On Mobile Phones Only:
  Enable this option to disable Fullscreen Video backgrounds only on mobile phones. They will continue to display on tablet devices. You can enable this option together with ‘Disable On Mobile Video Only’.
  Enter NO to disable or Yes to enable. Default is NO.

Support

If further help is needed you can go to our support page . We’ll do my best to help you.