P2 styles clashing with MEJS media player

  • The design of the MediaElementJS audio / video player, which is included by default with WordPress since 3.6, is “broken” by the button styling of the P2 theme’s CSS.

    To see the problem, simply insert an audio or video shortcode into one of your posts.

    If you view it in a compatible theme, such as Twentyfourteen, the media player looks fine.

    If you view it in P2, the player has some very weird, egg-shaped button styling. This happens because the CSS of P2 uses IDs as style selectors, like this: 

    #wrapper button {
 ...
}

    This code is overriding the audio player CSS, that uses classes:

    .mejs-controls .mejs-button button {
 ...
}

    The best solution would be to refactor the P2 CSS, so that it relies on classes rather than IDs (classes are easier to override).

    The easy and unelegant solution is to duplicate the MEJS button styles and add them to the theme stylesheet, together with the offending ID.

Viewing 6 replies - 1 through 6 (of 6 total)
  • Thread Starter Manuel Schmalstieg

    (@targz-1)

    If you want to see how funny it looks :

    https://twitter.com/16kbit/status/454729484768653312

    Thread Starter Manuel Schmalstieg

    (@targz-1)

    Update: as far as I can see, here is what it takes for the audio player to make it look good in P2.

    Be sure to correct the file path for the SVG icon.

    /*---------------------------------------------------
	Button Overrides
---------------------------------------------------*/

#wrapper .mejs-controls .mejs-button button {
cursor: pointer;
display: block;
font-size: 0;
line-height: 0;
text-decoration: none;
margin: 7px 5px;
padding: 0;
position: absolute;
height: 16px;
width: 16px;
border: 0;
background: transparent url(https://EXAMPLE.COM/wp-includes/js/mediaelement/controls.svg) no-repeat;
}
#wrapper .mejs-controls .mejs-pause button {
background-position: 0 -16px;
}
#wrapper .mejs-controls .mejs-mute button {
background-position: -16px -16px;
}
#wrapper .mejs-controls .mejs-unmute button {
background-position: -16px 0;
}

    Thanks for the report and for providing your workaround. I’ve filed this bug with our developers for consideration in a future theme update.

    Hi Manuel, thanks much for this bug report and the CSS to fix it. We’ve pushed the fix to the theme now. Cheers.

    Manuel – just wanted to let you know that your fix is now live in version 1.5.5 of p2. Thanks again for the report and the patch.

    Thread Starter Manuel Schmalstieg

    (@targz-1)

    Cool! Thanks for the notification ??

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘P2 styles clashing with MEJS media player’ is closed to new replies.