Last active
January 27, 2018 16:28
-
-
Save jocastaneda/8ff44d627cb9fe17b6d8a29a10de996e to your computer and use it in GitHub Desktop.
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 …
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
#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 { | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 { | |
} | |
} | |
} | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
#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 { | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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