Increase audio player size

Support
#1

Hi staff,

I’m trying to customize the audio player of theme x. So far i’ve changed the colors just the way i like it.
There are only 2 things i would like to change, but i’m not succeeding in achieving these changes.

  • I would like to make the audio player more visible. What i’m trying to do is make it twice as thick by changing the height of the audio player. And making the play and audio button bigger.
  • Is it possible to make the borders of the audio player square? This way it would fit better inside the column.

Url: http://www.feddewestera.nl/

I don’t know if this is even possible, but thanks a bunch in advance!
You guys rock!

Fedde

#2

Hi There,

Thanks for writing in! Try adding the following CSS rules into your Customizer, Custom > Edit Global CSS area.

.x-audio.player .mejs-controls {
    border-radius: 0;
}
.x-audio.player .mejs-controls .mejs-play button {
    font-size: 17px;
}

Hope that helps.

#3

Thanks for the fast reply!

The CSS above works good, but it’s not yet what i was trying to achieve.
I would like to increase the height of the audio player while sustaining the current width. I do realize that when increasing the height of the audio player the elements of the the audio player (for example the play button + volume button and the time-bar) might get out of proportion. So i would have to most likely customize all these parts separately (the size and position).
I have added a picture to explain it a little bit, even though my paint skills are very poor.
Is there a way to do this?

Much appreciated!

Fedde

#4

Hi Fedde,

It could only be possible with custom development, but this would be outside the scope of support we can offer. You may wish to consult a developer to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities.

Here is the entire CSS for the controls, you may add it in Custom CSS and modify as you wish.

.mejs-container:focus,
.mejs-container:active {
    outline: 0
}

.mejs-container.mejs-container-fullscreen {
    background-color: #000
}

.mejs-controls {
    height: 32px !important;
    border: 1px solid transparent
}

.mejs-controls>div {
    position: relative;
    float: left;
    width: 30px;
    height: 64px;
    line-height: 28px;
}

.mejs-video .mejs-controls {
    width: auto;
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 20px
}

.mejs-button button {
    margin: 0;
    border: 0;
    padding: 0;
    width: 80px;
    height: 64px;
    font-size: 14px;
    line-height: inherit;
    text-align: center;
    vertical-align: top;
    background: none;
}

.mejs-button button:focus,
.mejs-button button:active {
    outline: 0
}

.mejs-button button:before {
    content: "\f065";
    display: block;
    margin: 0 auto;
    font-family: "FontAwesome" !important;
    font-style: normal !important;
    font-weight: normal !important;
    text-decoration: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.mejs-button.mejs-play button:before {
    content: "\f04b"
}

.mejs-button.mejs-pause button:before {
    content: "\f04c"
}

.mejs-button.mejs-mute button:before {
    content: "\f028"
}

.mejs-button.mejs-unmute button:before {
    content: "\f026"
}

.mejs-button.mejs-fullscreen button:before {
    content: "\f065"
}

.mejs-button.mejs-unfullscreen button:before {
    content: "\f066"
}

.mejs-time {
    width: 45px !important;
    font-size: 10px;
    text-align: center
}

@media (max-width: 767px) {
    .mejs-time {
        display: none
    }
}

.mejs-time-rail {
    width: calc(100% - 30px) !important;
    padding: 10px 10px 0
}

.mejs-time-total {
    display: block;
    margin: 0;
    position: relative;
    width: 100% !important;
    cursor: pointer
}

.mejs-time-total:focus,
.mejs-time-total:active {
    outline: 0
}

.mejs-time-loaded,
.mejs-time-current {
    display: block;
    position: absolute;
    top: 0;
    left: 0
}

.mejs-time-loaded {
    width: 100% !important
}

.advanced-controls .mejs-time-rail {
    padding-left: 0;
    padding-right: 0
}

@media (max-width: 767px) {
    .advanced-controls .mejs-time-rail {
        padding-left: 10px;
        padding-right: 10px
    }
}

.advanced-controls.mejs-audio .mejs-time-rail {
    width: calc(100% - 250px) !important;
}

@media (max-width: 767px) {
    .advanced-controls.mejs-audio .mejs-time-rail {
        width: calc(100% - 60px) !important
    }
}

.advanced-controls.mejs-video .mejs-time-rail {
    width: calc(100% - 180px) !important
}

@media (max-width: 767px) {
    .advanced-controls.mejs-video .mejs-time-rail {
        width: calc(100% - 90px) !important
    }
}

.mejs-audio .mejs-layers {
    display: none
}

.mejs-video .mejs-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.mejs-video .mejs-poster {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50% 50%
}

.mejs-video .mejs-overlay-play {
    cursor: pointer
}

.mejs-video .mejs-overlay-loading,
.mejs-video .mejs-overlay-error,
.mejs-video .mejs-overlay-play .mejs-overlay-button {
    display: none
}

.bg .mejs-mediaelement {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden
}

.mejs-offscreen,
.mejs-time-buffering,
.mejs-time-handle,
.mejs-time-float,
.mejs-volume-slider,
.mejs-clear {
    display: none !important
}

.hide-controls .mejs-video .mejs-controls,
.vimeo .mejs-video .mejs-controls {
    display: none !important
}

.hide-controls.autoplay .mejs-video .mejs-layers {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.me-cannotplay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.me-plugin {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.mejs-controls {
    border-color: #000;
    background-color: #464646;
    background-image: -webkit-linear-gradient(to bottom, #5a5a5a, #272727);
    background-image: linear-gradient(to bottom, #5a5a5a, #272727);
    background-repeat: repeat-x;
    border-radius: 3px;
    box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.15), 0 0 3px 1px rgba(0, 0, 0, 0.35)
}

.mejs-button.mejs-playpause-button {
    border-right: 1px solid #272727;
    box-shadow: 1px 0 0 0 rgba(255, 255, 255, 0.1)
}

.mejs-button.mejs-volume-button,
.mejs-button.mejs-fullscreen-button {
    border-left: 1px solid #272727;
    box-shadow: inset 1px 0 0 0 rgba(255, 255, 255, 0.1)
}

.mejs-button button {
    color: #000;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.15);
    -webkit-transition: color 0.3s ease, text-shadow 0.3s ease;
    transition: color 0.3s ease, text-shadow 0.3s ease
}

.mejs-button button:hover {
    color: #bababa;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5)
}

.mejs-time {
    color: #7a7a7a;
    text-shadow: 0 1px 0 #000
}

.mejs-time-total {
    height: 10px;
    border: 1px solid #000;
    background-color: #000;
    border-radius: 5px;
    box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.1)
}

.mejs-time-loaded {
    height: 8px;
    background-color: #545454;
    border-radius: 4px;
    box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.15)
}

.mejs-time-current {
    height: 8px;
    background-color: #ff2a13;
    border-radius: 4px;
    box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.25)
}

Thanks for understanding. Take care!

1 Like