How to add embedded audio, video and other multimedia content to your tables
Our WooCommerce Product Table and Posts Table Pro plugins are very popular for displaying embedded audio and video files, along with other multimedia content such as media playlists or image galleries. For example, you might want to include an MP3 music player or embedded YouTube/Vimeo videos directly in the table, so that people can watch and listen without having to click to another page.
Both plugins fully support multimedia embeds. You can see this in action on our demo pages:
This article will tell you how to add embedded media files to your tables.
1. Choose where to add your embedded audio/video/multimedia files
First, you need to decide which field to use to store your embedded audio or media players. You can add them to any text-based column in the table, such as the main content/description, a ‘Shortcode’ or ‘Paragraph’ Gutenberg block, the WooCommerce short description, or a text or WYSIWYG custom field.
2. Add your audio or video embeds
Next, you need to add the embedded audio or video file for each post or product that you wish to display in the table. Go to edit the post/product and add an embedded audio or video file (or other type of multimedia content) to the appropriate place.
You can then display the audio, video or playlist in the ‘Content’ column of a table using Posts Table Pro, or the ‘Description’ column in WooCommerce Product Table.
- If you are using the Gutenberg editor then you can use an Audio or Video block.
- If you are using the classic WordPress editor and wish to host the audio/video in your WordPress Media Library, then you can click the ‘Add Media’ button and upload it directly. WordPress will automatically embed it as a fully functional media player using the built-in Audio or Video shortcodes, or the Playlist shortcode if you are creating a playlist. This is a good way to display audio files, but we recommend using a third party hosting service (e.g. YouTube or Vimeo) for video due to the larger file sizes and the need for cross-compatibility on all devices.
- If your multimedia files are hosted externally then you can use any of the embeds that are supported in WordPress.
- You might also be able to use multimedia shortcodes provided by another plugin, although you will need to check the Posts Table Pro compatibility list or WooCommerce Product Table compatibility list to see if they will work correctly in the table. The tutorials listed at the end of this article also mention some compatible third party plugins, for example if you want to add more eye-catching audio players to replace the default music player.
3. Enable the ‘Shortcodes’ option
Install the WooCommerce Product Table or Posts Table Pro plugin (see the instructions elsewhere in this knowledge base).
Go to the plugin settings page and tick the ‘Shortcodes’ option. This tells the plugin to display the embedded multimedia content correctly, instead of as plain text.
4. Create and view the table
Follow the instructions elsewhere in this knowledge base to create a table. Make sure you include the column containing your audio/video embeds in the table.
View the table and make sure the embedded media players are working correctly.
You may also be interested in our tutorials about creating multimedia tables with WooCommerce Product Table and Posts Table Pro:
- Posts Table Pro tutorials:
- WooCommerce Product Table tutorials:
- How to create extra data for storing your media embeds: