Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
HTML and CSS provided when using [audio|video] shortcodes in WordPress. The CSS was extracted and any pre-populated styles are inline-styles that are used by MediaElements. Note that you can target specific instances by targetting the `#mep_{$instance}` or even `#{$type}-{$post_id}-{$instance}` Yes, I have provided some SCSS as well if you want …
#mep_0 {
width: 100%;
height: 30px;
}
#audio-post_id-1 {
width: 100%;
}
.mejs-offscreen {
}
.mejs-inner {
}
.mejs-mediaelement {
}
.mejs-layers {
}
.mejs-poster.mejs-layer {
display: none;
width: 100%;
height: 30px;
}
.mejs-controls {
}
.mejs-button.mejs-playpause-button.mejs-play {
}
.mejs-time.mejs-currenttime-container {
}
.mejs-currenttime {
}
.mejs-time-rail {
width: 0px;
}
.mejs-time-total.mejs-time-slider {
width: 0px;
}
.mejs-time-buffering {
display: none;
}
.mejs-time-loaded {
}
.mejs-time-current {
}
.mejs-time-handle {
}
.mejs-time-float {
}
.mejs-time-float-current {
}
.mejs-time-float-corner {
}
.mejs-time.mejs-duration-container {
}
.mejs-duration {
}
.mejs-button.mejs-volume-button.mejs-mute {
}
.mejs-horizontal-volume-slider.mejs-mute {
}
.mejs-horizontal-volume-total {
}
.mejs-horizontal-volume-current {
width: 509px;
}
.mejs-horizontal-volume-handle {
left: 662px;
}
.mejs-clear {
}
<span class="mejs-offscreen">Audio Player</span>
<div id="mep_[ID-instance]" class="mejs-container svg wp-audio-shortcode mejs-audio" tabindex="0" role="application" aria-label="Audio Player" style="width: 100%; height: 30px;">
<div class="mejs-inner">
<div class="mejs-mediaelement">
<audio class="wp-audio-shortcode" id="audio-[post-id-is-used]-1" preload="none" style="width: 100%;" src="audio.mp3">
</audio>
</div>
<div class="mejs-layers">
<div class="mejs-poster mejs-layer" style="display: none; width: 100%; height: 30px;"></div>
</div>
<div class="mejs-controls">
<div class="mejs-button mejs-playpause-button mejs-play">
<button type="button" aria-controls="mep_0" title="Play" aria-label="Play"></button>
</div>
<div class="mejs-time mejs-currenttime-container" role="timer" aria-live="off">
<span class="mejs-currenttime">00:00</span>
</div>
<div class="mejs-time-rail" style="width: [JS-measured-and-rendered];">
<span class="mejs-time-total mejs-time-slider" style="width: [JS-measured-and-rendered];">
<span class="mejs-time-buffering" style="display: none;"></span>
<span class="mejs-time-loaded"></span>
<span class="mejs-time-current"></span>
<span class="mejs-time-handle"></span>
<span class="mejs-time-float" style="display: none;">
<span class="mejs-time-float-current">00:00</span>
<span class="mejs-time-float-corner"></span></span></span>
</div>
<div class="mejs-time mejs-duration-container">
<span class="mejs-duration">00:00</span>
</div>
<div class="mejs-button mejs-volume-button mejs-mute">
<button type="button" aria-controls="mep_0" title="Mute" aria-label="Mute"></button>
</div>
<a href="javascript:void(0);" class="mejs-horizontal-volume-slider mejs-mute" aria-label="Volume Slider" aria-valuemin="0" aria-valuemax="100" aria-valuenow="80" aria-valuetext="80%" role="slider" tabindex="0">
<span class="mejs-offscreen">Use Up/Down Arrow keys to increase or decrease volume.</span>
<div class="mejs-horizontal-volume-total"></div>
<div class="mejs-horizontal-volume-current" style="width: 40px;"></div>
<div class="mejs-horizontal-volume-handle" style="left: 27px;"></div>
</a>
</div>
<div class="mejs-clear"></div>
</div>
</div>
span.mejs-offscreen {
}
div.mejs-container.wp-type-shortcode.mejs-type.svg {
div.mejs-inner {
div.mejs-mediaelement {
.wp-type-shortcode {
}
}
div.mejs-controls {
div.mejs-time.mejs-currenttime-container {
span.mejs-currenttime {
}
}
div.mejs-time-rail {
span.mejs-time-total.mejs-time-slider {
span.mejs-time-float {
span.mejs-time-float-current {
}
}
}
}
div.mejs-time.mejs-duration-container {
span.mejs-duration {
}
}
a.mejs-horizontal-volume-slider.mejs-mute {
span.mejs-offscreen {
}
}
}
}
}
#mep_[ID-instance] {
}
#audio-[post-id-is-used]-1 {
}
.mejs-offscreen {
}
.mejs-inner {
}
.mejs-mediaelement {
}
.mejs-layers {
}
.mejs-poster.mejs-layer {
}
.mejs-controls {
}
.mejs-button.mejs-playpause-button.mejs-play {
}
.mejs-time.mejs-currenttime-container {
}
.mejs-currenttime {
}
.mejs-time-rail {
}
.mejs-time-total.mejs-time-slider {
}
.mejs-time-buffering {
}
.mejs-time-loaded {
}
.mejs-time-current {
}
.mejs-time-handle {
}
.mejs-time-float {
}
.mejs-time-float-current {
}
.mejs-time-float-corner {
}
.mejs-time.mejs-duration-container {
}
.mejs-duration {
}
.mejs-button.mejs-volume-button.mejs-mute {
}
.mejs-horizontal-volume-slider.mejs-mute {
}
.mejs-horizontal-volume-total {
}
.mejs-horizontal-volume-current {
}
.mejs-horizontal-volume-handle {
}
.mejs-clear {
}
<div id="mep_[instance-number]" class="mejs-container svg wp-video-shortcode mejs-video" tabindex="0" role="application" aria-label="Video Player" style="[JS-measured-rendered]">
<div class="mejs-inner">
<div class="mejs-mediaelement">
<video class="wp-video-shortcode" id="video-[wp-post-id]-1" width="[original-video-width]" height="[original-video-height]" preload="metadata" src="video.mp4">
<source type="video/mp4" src="video.mp4">
</video>
</div>
<div class="mejs-layers">
<div class="mejs-poster mejs-layer" style="display: none; width: [JS-measured-rendered]; height: [JS-measured-rendered];"></div>
<div class="mejs-overlay mejs-layer" style="width: [JS-measured-rendered]; height: [JS-measured-rendered]; display: none;"><div class="mejs-overlay-loading"><span></span></div></div>
<div class="mejs-overlay mejs-layer" style="display: none; width: [JS-measured-rendered]; height: [JS-measured-rendered];"><div class="mejs-overlay-error"></div></div>
<div class="mejs-overlay mejs-layer mejs-overlay-play" style="width: [JS-measured-rendered]; height: [JS-measured-rendered];"><div class="mejs-overlay-button"></div></div>
</div>
<div class="mejs-controls mejs-offscreen" style="display: block;">
<div class="mejs-button mejs-playpause-button mejs-play">
<button type="button" aria-controls="mep_2" title="Play" aria-label="Play"></button>
</div>
<div class="mejs-time mejs-currenttime-container" role="timer" aria-live="off">
<span class="mejs-currenttime">00:00</span>
</div>
<div class="mejs-time-rail" style="width: [JS-measured-rendered];">
<span class="mejs-time-total mejs-time-slider" style="width: [JS-measured-rendered];">
<span class="mejs-time-buffering" style="display: none;"></span>
<span class="mejs-time-loaded"></span><span class="mejs-time-current" style="width: [JS-measured-rendered];"></span>
<span class="mejs-time-handle" style="left: [JS-measured-rendered];"></span>
<span class="mejs-time-float">
<span class="mejs-time-float-current">00:00</span>
<span class="mejs-time-float-corner"></span>
</span>
</span>
</div>
<div class="mejs-time mejs-duration-container">
<span class="mejs-duration">00:23</span>
</div>
<div class="mejs-button mejs-volume-button mejs-mute">
<button type="button" aria-controls="mep_2" title="Mute" aria-label="Mute"></button>
<a href="javascript:void(0);" class="mejs-volume-slider" aria-label="Volume Slider" aria-valuemin="0" aria-valuemax="100" aria-valuenow="80" aria-valuetext="80%" role="slider" tabindex="0">
<span class="mejs-offscreen">Use Up/Down Arrow keys to increase or decrease volume.</span>
<div class="mejs-volume-total"></div>
<div class="mejs-volume-current" style="height: [JS-measured-rendered]; top: [JS-measured-rendered];"></div>
<div class="mejs-volume-handle" style="top: [JS-measured-rendered];"></div>
</a>
</div>
<div class="mejs-button mejs-fullscreen-button">
<button type="button" aria-controls="mep_2" title="Fullscreen" aria-label="Fullscreen"></button>
</div>
</div>
<div class="mejs-clear"></div>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment