Docs

[simon q]

Hi there

I want to customise the audio and video buttons on this page.

http://pronunciation.club/ai/

The audio buttons (under the symbol /aɪ/ ) I want to be a play button inside a circle.

The video players (under the womans face) I want to be just under the video and as wide as the video.

Thank you 🙂

[Christopher]

Hi there,

Please add following code in Customize -> Custom -> CSS :

.x-audio .mejs-button.mejs-play button:before {
    background-color: red;
    border-radius: 100%;
    margin: 2px;
}
.x-video .x-video-inner {
    overflow:visible; 
}
.mejs-video .mejs-controls {

    left: 0;
    right: 0;
    bottom: -33px
}

Hope that helps.

[simon q]

Hi that’s great.

How do I make the audio button just a play button in a circle, without the square around it or the long play bar to the right?

Also make the audio play button in the circle centered?

Once I can do that I can figure out the rest I want to do, I think 🙂

Cheers for the fast reply!!

[Rad]

Hi there,

You mean just display the play button?

Please try this,

.x-audio .mejs-time-total, .x-audio .mejs-time-rail{
display: none;
}

.x-audio .mejs-button.mejs-playpause-button {
border-right:0px;
}

.x-audio.player {
    width: auto;
    display: inline-block;
}

Cheers!

[simon q]

Hi there!

That was close enough! 🙂

I got it sorted using this CSS below. Cheers!!! 😀

.x-audio .mejs-time-total, .x-audio .mejs-time-rail{
display: none;
}
.x-audio .mejs-controls {
background-color: transparent !important;
}
.x-audio.player {
width: auto;
display: inline-block;
}
.x-audio .mejs-controls {
background-color: none !important;
border: none!important;
background-image: none;
box-shadow: none;
}
.x-audio .mejs-button button{
border: 1px solid lightblue;
border-radius: 100px;
background-color: lightblue;
width:60px;
height:60px;
}

[Christopher]

Thanks for sharing.

[Author]

Posts