How can to use the players from the Media Widgets in the body of a post to play audio and video files

I've been trying to use the <audio> tag to play MP3 files and the <video> tag to play MP4 files, both with the controls attribute, and they work fine, but it isn't possible to apply custom styles over them and they change from one browser to another.

Basically, <audio> tag works like this:

<audio controls loop>
  <source src="audio.mp3" type="audio/mpeg">
</audio>

And the <video> tag like this:

<video controls loop>
  <source src="video.mp4" type="video/mp4">
</video>

So I realized the default audio player set to the new Media Widgets introduced in WordPress 4.8 have nice players and they could be enough and I'd like to borrow their properties to use inside the body of audio/video format posts.

How can I achieve that?

I've been trying to use the <audio> tag to play MP3 files and the <video> tag to play MP4 files, both with the controls attribute, and they work fine, but it isn't possible to apply custom styles over them and they change from one browser to another.

Basically, <audio> tag works like this:

<audio controls loop>
  <source src="audio.mp3" type="audio/mpeg">
</audio>

And the <video> tag like this:

<video controls loop>
  <source src="video.mp4" type="video/mp4">
</video>

So I realized the default audio player set to the new Media Widgets introduced in WordPress 4.8 have nice players and they could be enough and I'd like to borrow their properties to use inside the body of audio/video format posts.

How can I achieve that?

• posts
• widgets
• media

Share Improve this question asked Feb 8, 2019 at 5:59 JorgeAmVFJorgeAmVF 11988 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default -1

While writting this question, I went further to be sure I wasn't asking something trivial and it seems I was.

I realized the players of both the theme I used and those new WordPress widgets use the same <div class> called .mejs-mediaelement and then I realized it points to MediaElement.js indicated both in the Make WordPress blog post and the first Google result when we search for this name (I thought WordPress had its own workaround, but I was wrong).

However, we don't need to install the plugin because, as Jacob Peattie explained in a comment below:

WordPress already has MediaElement.js built in and uses it for its audio and video players.

Then, we just need to add the following shortcodes respectively in order to add audio and video files to our posts:

[audio src="mymedia.mp3"]

[video src="mymedia.mp4" width="640" height="360"]

Then, it'll look just like the new Media Widgets because they do practically the same, but as a widget, of-course.