Video Background Atom

  • JoomLeadTeam
  • 10 March 2017
  • No comments
  • Docs
Video Background makes it extremely easy to add video across your website in no time!. See how Video Background can be designed beautifully on Demo Page.

# Video Background Package contents

Files Description
jlvideobackground.yaml Contains the Video Background Atom settings.
jlvideobackground.html.twig The Twig file to pull information, settings.
jquery.mb.YTPlayer.min.css Contains the Video Background Atom CSS.
jquery.mb.YTPlayer.min.js Contains the Video Background Atom JavaScript.

Installation Installing the particle on your website is a really simple process. You can refer to the document here to know more.

After you upload and implement this atom, go to your Template/Theme Settings > select the Layout to add Video Background (i.e: Home) -> Page Settings -> Enable the Video Background Atom


Step 1 Open Video Background Atom, you can add new items to the collection using the plus + icon

Setting Description
Element ID Enter your unique Gantry5 section id to display the video as background.
URL Enter the youtube video url, short url or ID.
The ID is bMv_4enya6E
Mute Mute the audio
Volume Set the volume level of the video (1 to 100).
Start at Set the seconds the video should start at.
Add Raster Show or hide a raster image over the video.
Show Controls Show the player controls.

Auto play the video once ready.

Note With the latest vendor policy the autoplay works only if the mute option is set to true otherwise the video will start with the first click/touch user interaction with the page.
Loop Loop the video background once ended.
Optimize Display Fit the video size into the window size optimizing the view.
Show youtube logo Show the YT logo and the link to the original video URL.
Pause video Pause the video when the window loose focus.
Quality Select the quality of the video, this feature is removed from 2.1.4.
The quality parameter has been deprecated on the YT API and never more used. YouTube adjusts the quality of your video stream based on your viewing conditions.
Ratio Select the aspect ratio of the movie.
Opacity Define the opacity of the video (0 to 1).

Here an example

Tips With Gantry 5, you can define the SECTION ID by following: Adding the g- prefix before the section name. Example with showcase section, the section id should be: g-showcase

Video Tutorial


Leave a Reply

You must be logged in to post a comment.

80+ templates updated for Joomla 5.1.1 and JoomLead particles 2.3.0 Download
Flash Sale. Get Up to 25% Off - Coupon: FLASH25 Shop Now