Skip to content

Instantly share code, notes, and snippets.

@PatTheMav

PatTheMav/Example_Markup.html

Created June 6, 2016 17:58
Show Gist options
  • Save PatTheMav/45c220b2b1654a3c880cdb0e226e26f5 to your computer and use it in GitHub Desktop.
Save PatTheMav/45c220b2b1654a3c880cdb0e226e26f5 to your computer and use it in GitHub Desktop.
Download ZIP
Infinite Scroll bug with Media embedded via MediaElement.js (Jetpack issue #1439)
Raw
Example_Markup.html
<div class="jetpack-video-wrapper">
<div class="wp-video" style="width: 640px; ">
<!--[if lt IE 9]><script>document.createElement('video');</script><![endif]-->
<span class="mejs-offscreen">
Video Player
</span>
<div aria-label="Video Player" class="mejs-container svg wp-video-shortcode mejs-video" id="mep_0" role="application" style="width: 523px; height: 294px;" tabindex="0">
<div class="mejs-inner">
<div class="mejs-mediaelement">
<span class="mejs-offscreen">
Video Player
</span>
<div aria-label="Video Player" class="mejs-container svg wp-video-shortcode mejs-video" id="mep_1" role="application" style="width: 523px; height: 392px;" tabindex="0">
<div class="mejs-inner">
<div class="mejs-mediaelement">
<video class="wp-video-shortcode" height="392" id="video-1120-1" preload="auto" src="PATH_TO_MP4.mp4?_=1" style="width: 100%; height: 100%;" width="523">
<source src="PATH_TO_MP4.mp4?_=1" type="video/mp4">
<a href="PATH_TO_MP4.mp4">
PATH_TO_MP4.mp4
</a>
</source>
</video>
</div>
<div class="mejs-layers">
<div class="mejs-poster mejs-layer" style="display: none; width: 100%; height: 100%;">
</div>
<div class="mejs-overlay mejs-layer" style="width: 100%; height: 100%; display: none;">
<div class="mejs-overlay-loading">
<span>
</span>
</div>
</div>
<div class="mejs-overlay mejs-layer" style="display: none; width: 100%; height: 100%;">
<div class="mejs-overlay-error">
</div>
</div>
<div class="mejs-overlay mejs-layer mejs-overlay-play" style="width: 100%; height: 100%;">
<div class="mejs-overlay-button">
</div>
</div>
</div>
<div class="mejs-controls">
<div class="mejs-button mejs-playpause-button mejs-play">
<button aria-controls="mep_1" aria-label="Play" title="Play" type="button">
</button>
</div>
<div aria-live="off" class="mejs-time mejs-currenttime-container" role="timer">
<span class="mejs-currenttime">
00:00
</span>
</div>
<div class="mejs-time-rail" style="width: 377px;">
<span class="mejs-time-total mejs-time-slider" style="width: 367px;">
<span class="mejs-time-buffering" style="display: none;">
</span>
<span class="mejs-time-loaded" style="width: 367px;">
</span>
<span class="mejs-time-current" style="width: 0px;">
</span>
<span class="mejs-time-handle" style="left: -5px;">
</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:03
</span>
</div>
<div class="mejs-button mejs-volume-button mejs-mute">
<button aria-controls="mep_1" aria-label="Mute" title="Mute" type="button">
</button>
<a aria-label="volumeSlider" aria-valuemax="100" aria-valuemin="0" aria-valuenow="80" aria-valuetext="80%" class="mejs-volume-slider" href="javascript:void(0);" role="slider" style="display: none;" 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: 80px; top: 28px;">
</div>
<div class="mejs-volume-handle" style="top: 25px;">
</div>
</a>
</div>
<div class="mejs-button mejs-fullscreen-button">
<button aria-controls="mep_1" aria-label="Fullscreen" title="Fullscreen" type="button">
</button>
</div>
</div>
<div class="mejs-clear">
</div>
</div>
</div>
</div>
<div class="mejs-layers">
<div class="mejs-poster mejs-layer" style="display: none; width: 100%; height: 100%;">
</div>
<div class="mejs-overlay mejs-layer" style="display: none; width: 100%; height: 100%;">
<div class="mejs-overlay-loading">
<span>
</span>
</div>
</div>
<div class="mejs-overlay mejs-layer" style="display: none; width: 100%; height: 100%;">
<div class="mejs-overlay-error">
</div>
</div>
<div class="mejs-overlay mejs-layer mejs-overlay-play" style="width: 100%; height: 100%;">
<div class="mejs-overlay-button">
</div>
</div>
</div>
<div class="mejs-controls">
<div class="mejs-button mejs-playpause-button mejs-play">
<button aria-controls="mep_0" aria-label="Play" title="Play" type="button">
</button>
</div>
<div aria-live="off" class="mejs-time mejs-currenttime-container" role="timer">
<span class="mejs-currenttime">
00:00
</span>
</div>
<div class="mejs-time-rail" style="width: 377px;">
<span class="mejs-time-total mejs-time-slider" style="width: 367px;">
<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">
<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 aria-controls="mep_0" aria-label="Mute" title="Mute" type="button">
</button>
<a class="mejs-volume-slider" href="javascript:void(0);" style="display: none;">
<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: 80px; top: 28px;">
</div>
<div class="mejs-volume-handle" style="top: 25px;">
</div>
</a>
</div>
<div class="mejs-button mejs-fullscreen-button">
<button aria-controls="mep_0" aria-label="Fullscreen" title="Fullscreen" type="button">
</button>
</div>
</div>
<div class="mejs-clear">
</div>
</div>
</div>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment