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

Settings

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. https://www.youtube.com/watch?v=ID.
Example: https://www.youtube.com/watch?v=bMv_4enya6E
The ID is bMv_4enya6E
Volume Set the volume level of the video (1 to 100, 0 to mute the video).
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.
Autoplay Auto play the video once ready.
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.
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

Comments

Leave a Reply

You must be logged in to post a comment.