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 …

audio.css

#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 {
}

audio.html

<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>

medias.scss

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 {
					
				}
			}
		}
	}
}

video.css

#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 {
}

video.html

<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>