I’ve been trying to get the core video player to be responsive.
[video src="example.mp4" poster="example.jpg" width="512" height="380" autoplay="on"]
The shortcode only accepts integers and creates a fixed width video player with mediaelement.js. I’ve probably overlooked something. Has anyone found a good way to make this responsive?
Does that work with the short code? The shortcode outputs this for the video:
<div style="width: 512px; max-width: 100%;" class="wp-video"><!--[if lt IE 9]><script>document.createElement('video');</script><![endif]-->
<div id="mep_0" class="mejs-container svg wp-video-shortcode mejs-video" style="width: 512px; height: 380px;">
<div class="mejs-inner">
<div class="mejs-mediaelement">
<video class="wp-video-shortcode" id="video-100-1" width="512" height="380" poster="example.jpg" autoplay preload="metadata" src="example.mp4">
<source type="video/mp4" src="example.mp4">
<a href="example.mp4">example.mp4</a></video>
</div>
<div class="mejs-layers">
<div class="mejs-poster mejs-layer" style="background-image: url(example.jpg); display: none; width: 512px; height: 380px;"><img width="100%" height="100%" src="example.jpg"></div>
<div class="mejs-overlay mejs-layer" style="width: 512px; height: 380px; display: none;">
<div class="mejs-overlay-loading"><span></span></div>
</div>
<div class="mejs-overlay mejs-layer" style="display: none; width: 512px; height: 380px;">
<div class="mejs-overlay-error"></div>
</div>
<div class="mejs-overlay mejs-layer mejs-overlay-play" style="display: block; width: 512px; height: 350px;">
<div class="mejs-overlay-button" style="margin-top: -35px;"></div>
</div>
</div>
<div class="mejs-controls" style="visibility: hidden; display: block;">
<div class="mejs-button mejs-playpause-button mejs-play">
<button type="button" aria-controls="mep_0" title="Play/Pause" aria-label="Play/Pause"></button>
</div>
<div class="mejs-time mejs-currenttime-container"><span class="mejs-currenttime">00:03</span></div>
<div class="mejs-time-rail" style="width: 362px;"><span class="mejs-time-total" style="width: 352px;"><span class="mejs-time-buffering" style="display: none;"></span><span class="mejs-time-loaded" style="width: 352px;"></span><span class="mejs-time-current" style="width: 58px;"></span><span class="mejs-time-handle" style="left: 53px;"></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:20</span></div>
<div class="mejs-button mejs-volume-button mejs-mute">
<button type="button" aria-controls="mep_0" title="Mute Toggle" aria-label="Mute Toggle"></button>
<div class="mejs-volume-slider" style="display: none;">
<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>
</div>
</div>
<div class="mejs-button mejs-fullscreen-button">
<button type="button" aria-controls="mep_0" title="Fullscreen" aria-label="Fullscreen"></button>
</div>
</div>
<div class="mejs-clear"></div>
</div>
</div>
</div>
Ahh… yeah, it probably won’t work a player like that. From http://css-tricks.com/rundown-of-handling-flexible-media/:
.mejs-container {
width: 100% !important;
height: auto !important;
padding-top: 57%;
}
.mejs-overlay, .mejs-poster {
width: 100% !important;
height: 100% !important;
}
.mejs-mediaelement video {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
width: 100% !important;
height: 100% !important;
}
Thank you !Your code solve my problem.Love you.