Video Particle Documentation

  • JoomLeadTeam
  • 2 November 2016
  • 2 Comments
  • Docs
An easy way to share video for Joomla/Wordpress with a wide range of features. See how Video can be designed beautifully on Demo Page. 🙂

# Video Package contents

Files Description
jlvideo.yaml Contains the Video particle settings.
jlvideo.html.twig The Twig file to pull information, settings.
_jlvideo.scss The custom Video button style sheet. Use @import "jlvideo"; in your custom.scss file to import it. Gantry will automatically pick it up and compile it properly.

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

Requirements Video particle requires Uikit 3 for Gantry 5 Atom to be installed and enabled in your theme layout settings.

Go to Template/Theme Settings > select the Layout to add Video particle (i.e: Home) -> Layout tab -> Drag and drop the Video Particle from Particles panel (left corner) to the section you want to display the video.

Settings

Tab Content

Settings Description
Source Video Source (Support local, youtube and vimeo)
Url URL from YouTube, Vimeo, or External
Local Video Video picker to select desired video.
Poster Frame Select an optional image which shows up until the video open.
Video Dimensions
Width Enter the video’s width.
Height Enter the video’s height.
Video Settings Most options are available for local video only
Show controls Enable or disable play bar (applies to YouTube, Local, and External videos).
Loop Enable or disable video looping.
Mute Video Local / External videos must be Muted in order for Autoplay to work on Android / iOS devices.
Play Inline Play inline on mobile devices(for Local Video Only).
Lazy load video Lazy load video on page load.
Autoplay Disable autoplay, start autoplay immediately or as soon as the video enters the viewport. For Vimeo/Youtube, Muted auto added if you enable Autoplay for Video.
Video Box Shadow Select the video’s box shadow size.
CSS Classes CSS class name for the particle.

Tab Poster Frame

Settings Description
Poster Frame Common settings for Poster Frame
Link Frame Link the whole poster frame on click.
Image Transition Select an image transition for poster frame
Overlay Style Select the style for the overlay.
Width Enter the image’s width.
Height Enter the image’s height.
Image border Select the image’s border style.
Image Box Shadow Select the image’s box shadow size.
Hover Box Shadow Select the image’s box shadow size on hover.
Popup Tyle Select the modal or lightbox popup on click.
Modal Settings Common settings for modal popup.
Close button To place the close button outside or inside the modal container.
Center modal Use this option to vertically center the modal dialog.

General, Parallax and Parallax Background tab

Please take a look the documentation here for more detail about these tabs settings

Comments

  1. Avatar
    vincent rochas

    Hello, I have a Helium theme, and I’m using this particle. But I have an issue, the video is displayed with a short height and I have absolutely no clue how to fix it. In the presentation video, it fits properly the container, I wonder why.
    Thanks in advance.
    Vincent

Leave a Reply

You must be logged in to post a comment.