This element provides you with a powerful media player, to play videos & audio in Bricks with support for YouTube & Vimeo as well as self-hosted mp4 videos & mp3s (and other formats listed below). The element is optimised for loading performance, and integrates well with Bricks dynamic data and query loops for building custom playlists to feed to the media player.
[Documentation still being written.. element in development]
- 3 Loading Options – Load on page load, load only as the video comes into view, or load only if the user clicks on the thumbnail.
- Easily create your own playlist using Bricks’ query loop and the nestable ‘playlist item’ element.
- Playlist supports including videos from different providers & switching seemlessly.
- Use local poster images for any image source (no connecting to Youtube/Vimeo before needed)
- Customizable UI. Add/remove/style/re-order all internal controls.
- Small Player UI – Option for changing the output of the UI depending on either media query or container query, ideal for creating mobile optimised player that adapts to any layout.
- Add chapters to content via custom fields.
- Built-in support for using in filtered content (WPGB/Piotnet Grid/JetSmartfilters) and in lightboxes, modals.
- Hides Youtube UI & video recommendations out of the box.
The player has two ‘modes’, video and audio.
Video – supports locally hosted video (mp4, ogg, ogv, webm, mov, m4v) as well as Youtube & Vimeo hosted URLs.
Audio – supports the following formats (m4a, m4b, mp4a, mpga, mp2, mp2a, mp3, m2a, m3a, wav, weba, aac, oga, spx)
For best loading performance, we recommend you add a poster image and set the ‘loading’ to ‘on click’. This will ensure only the local poster image and the player UI will be added to the page. Only when/if the user decides to interact with the player will any connection to Youtube/Vimeo be made.
If using the player inside of an OffCanvas, Lightbox or Modal you may wish to instead use the ‘load when comes into view’ option to prevent the user needing to click the player to load.
Out of the box the player comes with a nice, minimalistic UI with the common controls. This can all be customised.
In video mode, the player UI is divided into two main ‘zones’, positioned at the top and the bottom of the player. There’s also center for adding play/pause button and an optional full width time-slider above the bottom controls (optional because you can also include a time slider as one of the controls inside the other zones).
The player controls (see full list below) can be added/removed/re-ordered from the top and bottom to create your layout. These controls will fade away once the user starts watching the video.
This UI output can dynamically change depending on the width, either of the player itself (like a container query) or the viewort (like a media query) and output a new UI.
For example, instead of just trying to fit the desktop layout into mobile by changing the spacing, we can instead adjust the UI completely to better suit the smaller space. This is useful for both mobile devices or if the video player is inside some type of grid, where sometimes the media player may need to fit into a tighter space on some devices.
To better highlight the difference between the container query option and the media query that you may be more familiar with, see the below image.
Notice that the video players in the grid on the right are using the small UI layout, even on desktop view, because they are contained into a smaller space due to the grid layout. This is exactly the same player inside of a loop, just adapting based on it’s own size. Just choose the breakpoint for the width where you’d want the smaller UI to kick in.
‘play’ – Play/pause playback
‘seek-forward’ – Fast forward by the seek time (default 10 seconds)
‘seek-backward’ – Rewind by the seek time (default 10 seconds)
‘time slider’ – The progress bar and scrubber for playback and buffering
‘time’ – For showing the current time of playback & The full duration of the media
‘mute’ – Toggle mute – with an optional volume slider.
‘captions’ – Toggle captions on/off (if they exist)
‘settings’ – Settings menu with speed and chapters (if they exist)
‘pip’ – Picture-in-picture (video only)
‘fullscreen’ – Toggle fullscreen (video only)
‘spacer’ – The spacer control is to easily add the gap between the controls to allow for, for quickly aligning left/right.
Each control has it’s own individual settings and can be arranged in any order within the UI zones.
Adding chapters to media is a great way to split up longer content. After adding chapters, three things in the media player will change.
- The ‘time slider’ control will be divided up into chapters with the chapter title in the tooltip as the user scrubs through the timeline.
- The ‘title’ control will auto-update as the player reaches each chapter time.
- The ‘settings’ control will include any chapters to allow users to skip through each chapter.
The important thing to be mindful of with chapters, because you’re dividing up the content into sections, the last cue end time added must correlate with the end of the video.
There are three ways to add chapters to your media player..
If you already have a VTT file or SRT, simply add as a new text track as you would if adding subtitles or captions. (more about the WebVTT format)
Adding chapters via settings
If you prefer to add the chapter data inside Bricks, head to the ‘chapters’ tab and either in the data for each chapter there.
Query Loop / Dynamic data
Or select the query loop option and set up a query for populating the chapters dynamically with custom fields.
(To control whether these keys control the player globally, or only when that particular player is focused, go to Media Player > Interaction > Keyboard)
||Seek from 0 to 90% respectively|
|←||Seek backward by the
|→||Seek forward by the