WordPress is a popular CMS. Wikipedia writes that it was originally aimed at blogs, but nowadays it's leveraged for all sorts of use-cases. It's not uncommon to want to embed a video player on a WordPress website.
Interested in our WordPress 5+ plugin? Reach out to us if you want to evaluate this.
We have no affiliation with these plugins or their creators. They were just the first applicable plugins which popped up when looking.
You can embed THEOplayer through an
Please refer to "How can we embed an iframe?" for more information on setting up an iframe.
You must have a valid WordPress.org deployment. We used WordPress version 5.5 in a local MAMP set-up when writing this article.
You must have the THEOplayer Web SDK library files (
or you must know how to refer to them and the
libraryLocation. You've read through our Web SDK Getting Started Guide,
and you understand all of its content.
Navigate to the page where you want to integrate the THEOplayer Web SDK.
Create the HTML
<div> container which should load your video player instance.
Your Custom HTML block should now be similar to the code below.
You can set the CSS of this container directly in the
<div> tags by using
<div style="height: ...">, or you could
add additional CSS to your page.
vjs-16-9 to the
<div class="... because we want THEOplayer to render in a 16:9 aspect ratio.
Sometimes, the CSS and styles of your WordPress theme might clash with THEOplayer's styling. It is your responsibility to
identify styling issues caused by your theme. For example, the CSS of our WordPress skin tried to meddle with the width
of our container, so we manually unset it as demonstrated below.
<div class="video-js vjs-16-9 theoplayer-container theoplayer-skin" style="max-width: unset;"></div>
Finally, you want to create your video player instance and configure a video stream for this player instance.
You can achieve this by expanding your Custom HTML block to resemble the snippet below: