Start playing videos as they are shown or enter the viewport.
The Video component offers two advanced functions for videos. First, it allows you to pause a video whenever it's hidden with CSS and resume playing once it becomes visible again. In addition, the video can pause when it's outside the viewport and start playing when entering it.
Html5 Video with control
Html5 Video without control
Modal Popup
Content Fields
Here is a list of common content fields for Team add-on.
| Setting | Description |
|---|---|
| Video Type | Select video type, support Youtube/Vimeo/Html5 video and modal |
| Hide Video Info | Remove video info and remove related videos from the end of an embedded video |
| Autoplay inview | To play a video when it enters the viewport and pause it again when it leaves the viewport |
General Settings
General settings, which are the same across all add-ons, are grouped in a General section at the bottom. Here is a short overview.
| Setting | Description |
|---|---|
| Box Shadow | Select the image's box shadow size on hover. |
| Hover Box Shadow | Select the image's box shadow size on hover. |
| Margin | Keep the existing vertical margin (e.g. from headings), force specific margin or remove all margin. Margins of an element can be removed from the top and bottom. |
| Remove top margin. | Use this option to remove the add-on's top margin |
| Remove bottom margin. | Use this option to remove the add-on's bottom margin |
| Animation | Overwrite the animation settings from the section. This won't have any effect unless animations are enabled for the add-on. |
| Alignment | This option specifies the alignment of an add-on according to the surrounding element |
| Text Breakpoint | Define the device width from which the alignment will apply. |
| Visibility | Define when the add-on should be hidden. |
| CSS Class | If you wish to style a particular content element differently, then use this field to add a class name and also refer to it in your css file. |