Pro Media Player
This component allows you to add dynamic, lazy loading videos & audio to Oxygen templates with support for Youtube & Vimeo as well as self-hosted video & audio.
Faster loading times
This component has preconnections + lazy loading built in, for a fast page loading times even on pages with lots of videos. Any videos placed inside modals or inside the offcanvas, won’t load at all until the videos are made visible to the site visitor.
Media Source
The two video providers currently supported are Vimeo & Youtube. Also the player can be used for playing mp4 files & audio files by providing the URL to the file itself.
For Vimeo & Youtube, either the video URL or just the ID
eg youtube URL would be something like..
https://www.youtube.com/watch?v=IJyNoJCAuzA
where as just the ID would be..
IJyNoJCAuzA
Dynamic Data – The media source can be populated via Oxygen’s dynamic data feature, ideal for templating where videos can be populated dynamically using ACF fields, for example.
Poster image – Poster images will be shown as the component first loads (when is first made visible to the user). If using the Vimeo or Youtube providers, the poster image will be the thumbnail from the provider. If using the video option, a custom image can be used.
UI Controls
UI Type – The media player can either have no controls (relying on clicking to play/pause), the styleable controls (which can be styled from inside Oxygen) or the standard provider controls. The standard provider controls are the default youtube controls, vimeo controls or the standard HTML5 video controls.
Note – due to how iOS handles fullscreen video, on iPhones the controls will default to the standard provider controls. This is unique to iOS.
Disable Controls – If choosing the stylable controls, each control can be removed from the player seperately.
UI Layout – The media player has two layout options, default has all the controls underneath the video on desktop. Centered play/pause place a custom icon in the center of the video for play and pause.
The icons can be changed and styled by in the Custom Play/Pause tab.
Colors
Color Theme – Change the overall style of the controls from light or dark
Behaviour
Change the behaviour of the how the user interacts with the video. (These controls do not apply to audio and will be hidden)
Disable Controls – If choosing the stylable controls, each control can be removed from the player seperately.
Muted by default – Set the media player to be muted when the media is first played. This will only apply to locally hosted videos, not Youtube or Vimeo videos.
Clicking on element with Play/Pause – Whether clicking the player should not toggle playback.
Double click for fullscreen – Whether double clicking the player should not toggle fullscreen mode.
Hide controls on mouse leave – Whether the controls should hide when the mouse leaves the player
Hide controls on pause – Whether the controls should show/hide when paused
Wait for playback start – Whether the controls should wait for playback to start before being shown
Autopause – Whether the player should automatically pause when another player starts/resumes playback.
Poster Image
An image from either the provider (Youtube, Vimeo) or from the media library can be displayed over the top of the video before the playback starts.
Loading
Both the loading spinner & the loading skeleton styles can be styled to better match the style of the site. The loading skeleton is the empty space taken up by the video with a coloured sheen.
Control Tooltips
If using the default UI, on desktop all of the stylable controls have tooltips that appear on hover. These can be styled to match the rest of the UI, or disabled completely.
Tips
Make sure that if you have a performance plugin that is trying to merge together all the scripts on the page to exclude the vime JS. This is because it’s a module script coming directly from the CDN. It’s a package that will load the tiny JS files individually & asynchronously for the different parts of the player. Most performance plugins just require a keyword to choose which JS files to ignore. So either ‘vime’ or the whole URL is..
‘https://cdn.jsdelivr.net/npm/@vime/core@^4.7.3/dist/vime/vime.esm.js’
FAQ
Possible to autoplay videos?
Not at the moment. Autoplay is currently not an option in Pro Media Player. We had to remove it as it was not reliable plus iOS prevents autoplay in a lot of cases.
How to make “Copy link” work?
In the Pro Media Player component’s settings, go to Behaviour controls group and set both these to False:
- Clicking on element will play/pause
- Double click element for fullscreen
This will make the Copy link functional.
Can the player be used inside lightboxes?
If using our lightbox element, we recommend using the built-in video options for dynamically fetching videos when the lightbox opens. The Vime library isn’t a good solution when trying to mix with lightboxes.