Custom CSS for Video Element

Hey tommyp15,

The default colors can be changed via css however the icons like the play/pause button doesn’t change because it’s an svg file and you’ll need to replace it with a dark svg file or image.
Here’s a great guide in styling wordpress’ media player: https://www.cssigniter.com/css-style-guide-for-the-default-wordpress-media-player/ under it’s “Styling the player” section just replace .mytheme-mejs-container with #top, so the code in Quick CSS should be:

/* Player background */
#top .mejs-container,
#top .mejs-controls,
#top .mejs-embed,
#top .mejs-embed body {
  background-color: #efefef;
}

/* Player controls */
#top .mejs-button > button {
  background-image: url(images/mejs-controls-dark.svg);
}

#top .mejs-time {
  color: #888888;
}

/* Progress and audio bars */

/* Progress and audio bar background */
#top .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total,
#top .mejs-controls .mejs-time-rail .mejs-time-total {
  background-color: #fff;
}

/* Track progress bar background (amount of track fully loaded)
  We prefer to style these with the main accent color of our theme */
#top .mejs-controls .mejs-time-rail .mejs-time-loaded {
  background-color: rgba(219, 78, 136, 0.075);
}

/* Current track progress and active audio volume level bar */
#top .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current,
#top .mejs-controls .mejs-time-rail .mejs-time-current {
  background: #db4e88;
}

/* Reduce height of the progress and audio bars */
#top .mejs-time-buffering,
#top .mejs-time-current,
#top .mejs-time-float,
#top .mejs-time-float-corner,
#top .mejs-time-float-current,
#top .mejs-time-hovered,
#top .mejs-time-loaded,
#top .mejs-time-marker,
#top .mejs-time-total,
#top .mejs-horizontal-volume-total,
#top .mejs-time-handle-content {
  height: 3px;
}

#top .mejs-time-handle-content {
  top: -6px;
}

#top .mejs-time-total {
  margin-top: 8px;
}

#top .mejs-horizontal-volume-total {
  top: 19px;
}

Just replace the colors and the background image.
Hope this helps.

Best regards,
Nikko

Hi Tommy,

Can you give a link to your site? so we can try to inspect it.
Also the svg file needs to be uploaded to your child theme first, the url in the background image needs to be changed in this code:

background-image: url(images/mejs-controls-dark.svg);

Let us know if there’s a part that’s confusing.

Best regards,
Nikko

Hi Tommy,

Modifying the skin of the player only works if the video is local but doesn’t work on vimeo or youtube since it’s using an iframe.
As for enlarging the video via lightbox, would this do: https://kriesi.at/themes/enfold-startup/ (click on the play button).
And as for the playback settings, we apologize but video settings doesn’t provide those features yet.

Best regards,
Nikko

Hi Tommy,

I see, as for lightbox demonstrated in Enfold Startup, it’s just an icon with the following settings: https://imgur.com/r0ELiFF
Hope this is helpful.

Best regards,
Nikko

Hi Bruno,

I have checked on your site and the background image points to (link in private content) and it’s white in color.
You’ll need to use a different image and point it in css, if you’re not sure how to do this, then just post in private content the link to the dark play button image, then we’ll write some CSS code based on it which should work.
As for autoplay, browsers have some sets of policy which prevents autoplay, in chrome for example it needs to be muted first. Also, you can try to disable Javascript file merging and compression in Enfold > Performance.

Best regards,
Nikko