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..

where as just the ID would be..

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.


Color Theme – Change the overall style of the controls from light or dark


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.


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.


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..



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:

  1. Clicking on element will play/pause
  2. 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.