---
title: Customize The Video Popup Player
description: "## Overview The style of the video player used with the *Videos* plugin extension is fully customizable with CSS. *Videos* extension version 1.1+ uses the media player from [MediaElement.js](https://github.com/mediaelement/mediaelement/blob/master/src/css/mediaelementplayer.css), which is used by WordPress core.  This replaces the previous video…"
url: "https://wppopupmaker.com/docs/video-popups/customize-the-video-popup-player/"
updated: "2026-06-10"
category: Extensions / Video Popups
---

# Customize The Video Popup Player

## Overview

The style of the video player used with the *Videos* plugin extension is fully customizable with CSS.

*Videos* extension version 1.1+ uses the media player from [MediaElement.js](https://github.com/mediaelement/mediaelement/blob/master/src/css/mediaelementplayer.css), which is used by WordPress core.  This replaces the previous video and audio player from [Plyr.js](https://cdnjs.com/libraries/plyr) included with *Videos* version 1.0+.

This article includes the CSS stylesheets for the current and earlier versions of the *Videos* plugin extension and their media players. 

## Add Custom CSS in A Child Theme or Plugin

Learn where and how to customize Popup Maker's CSS on your site.  See: [Getting Started with Custom CSS](https://wppopupmaker.com/docs/getting-started-with-custom-code/getting-started-with-custom-css/).

## Videos CSS Styles

### Version 1.1+ Stylesheet

The full CSS stylesheet for the *Videos*plugin extension version 1.1+.  There is no inline documentation included. It is suitable for advanced users who know their way around CSS.

View the [source on GitHub](https://github.com/PopupMaker/Library/blob/master/Video_Popups/video-popups-stylesheet-version-1_1.css).

---

### Media Element Player Stylesheet

The full CSS stylesheet for the *MediaElement.js* video player used by the*Videos* plugin extension version 1.1+.

View the [source on GitHub](https://github.com/PopupMaker/Library/blob/master/Video_Popups/mediaelementplayer.css).

---

### Version 1.0+ Stylesheet

Out-of-the-box, the player looks like this:

![file](https://s3.amazonaws.com/helpscout.net/docs/assets/559c68b9e4b03e788eda1692/images/58bb7084dd8c8e56bfa83129/file-s1Dl6HfYZx.jpg)

---

### Version 1.0+ Video Player Customized Styles

Version 1.0+ of the *Videos* extension used the [plyr.js](https://cdnjs.com/libraries/plyr) library to render a video player.

The following style sheet changes the default styles for the video player. It has all the styles needed to change the default colors of all of the player elements, and includes some extra styles for changing the position and size of various elements of the player.

This basic style sheet will change the player so it looks like the image below. This was done to make it easier to follow which styles change their respective elements:

![file](https://s3.amazonaws.com/helpscout.net/docs/assets/559c68b9e4b03e788eda1692/images/58bb6d95dd8c8e56bfa83121/file-4QTQYL52xx.jpg)

The style sheet includes inline documentation to follow along with changes to the player.

View the [source on GitHub](https://github.com/PopupMaker/Library/blob/development/Video_Popups/videos-popups-customized-styles.css).

### Version 1.0+ Stylesheet

The full CSS stylesheet for the *Videos*plugin extension version 1.0+.  There is no inline documentation included. It is suitable for advanced users who know their way around CSS.

View the [source on GitHub](https://github.com/PopupMaker/Library/blob/development/Video_Popups/videos-popups-stylesheet-version-1_0.css).