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.

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.

chevron-down