Compact Media Player displaying extra buttons

  • optosonic

    (@optosonic)


    4 years, 6 months ago

    Every instance of the media player on my site is showing 2 sets of overlapping media buttons. I see the appropriate styled yellow play and volume buttons, but underneath I can also see a second instance of white play and volume buttons. This is a new problem after a year of using this theme/plugins/styling. The link above show my podcast’s episode page with a grid of all episodes with media player included. The same problem happens on each individual show page (example) as well.

    Can anyone help me troubleshoot why I am seeing the duplicate white versions of the media buttons?

    The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)
  • yogeshyadav20

    (@yogeshyadav20)

    4 years, 6 months ago

    Hi @optosonic

    Try this CSS

    #main-container-secondline .mejs-playpause-button button:before {
    font-size: 0;
}
body #main-container-secondline .mejs-volume-button.mejs-mute button:before {
    content: none;
}

    Let me know if it’s fine and what you want
    Thanks

    Thread Starter optosonic

    (@optosonic)

    4 years, 6 months ago

    Thanks for your reply @yogeshyadav20. I tried this CSS and it removed the top layer button, which was the one I had styled. So it left behind the duplicate button which I have not styled. I want to keep the top layer, yellow styled buttons and get rid of the white lower layer.

    Also, the second half didn’t do anything to the volume mute, but when I used font-size: 0; instead it did the same thing that happened with the play button.

    Another thing to note. The unintentional bottom white layer animates with a slide when clicked. before being clicked it shows both play AND pause. When clicked, it slides to the left and shoe pause AND mute.

    yogeshyadav20

    (@yogeshyadav20)

    4 years, 6 months ago

    Sorry to here this

    could you please remove this css from index line no.342

    .mejs-button>button {
    background: transparent url(https://likeyoupodcast.com/wp-includes/js/mediaelement/mejs-controls.svg) !important;
}

    This will fixed your issue

    Thanks

    yogeshyadav20

    (@yogeshyadav20)

    4 years, 6 months ago

    After removing that css it’s look like this

    https://www.awesomescreenshot.com/image/14346660?key=15b3ae70d421225e00a6520b4f12b91c

    Thread Starter optosonic

    (@optosonic)

    4 years, 6 months ago

    Thanks again for your help. Sorry if this is a simple question, but I am not sure how to remove that. In the past I have only made CSS changes using WP’s built in Customizer to add additional CSS. I know how to edit the CSS here, but I do not know how to remove other CSS that is not part of my custom CSS additions.

    I see the code you mention when view source code in Chrome, but I do not see it in the style.css file for the site. I am not sure where else to look to remove that code.

    Thread Starter optosonic

    (@optosonic)

    4 years, 6 months ago

    I just tried adding this to my additional custom CSS code and it seems to have been effective.

    .mejs-button>button {
    background: transparent url() !important;
    }

    Basically I just removed the url from the code you mentioned. I’m just this isn’t the best way to accomplish it. Is there any reason this would cause any other problems down the road to handle it in this fashion.

    yogeshyadav20

    (@yogeshyadav20)

    4 years, 6 months ago

    it’s okay, but for avoid conflict problem you should add page class before button class like this

    .page page-id-771 .mejs-button>button {
background: transparent url() !important;
}
Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘Compact Media Player displaying extra buttons’ is closed to new replies.