Adding The Pipe Video Recorder to WordPress Posts & Pages
In this Step-By-Step tutorial we show you how to integrate Pipe Video Recorder in Wordpress Post and Pages without a using a Plugin
Update September 2024: There is a new WordPress plugin available. You can read more about it in this blog post.
Form the start Pipe paid good attention to the WordPress ecosystem. Early on we've explored the possibilities with an official WordPress plugin and we've tried to integrate as much as possible with popular WP form solutions like Gravity Forms and Ninja Forms.
However, recently, our WP plugin has been "closed" with no explication from the WP directory team. In light of this event we've decided to take a step back and re-evaluate what our WP plugin could and should do. Until the result of that esoteric search will manifest itself into a new plugin, we've written this post explaining how to use the Pipe recorder directly with WordPress' new Gutenberg and Classic editors. Luckly, this is a simple operation.
Gutenberg editor
WordPress 5.0+ ships with a new block editor called Gutenberg that's installed by default.
The Gutenberg editor makes it easy to add Pipe to any page or blog post because it has a special Custom HTML block:
To add the Pipe recorder to any page or post just copy the embed code from the Pipe account area and paste it into a new Custom HTML block. Here's how my block looked like after pasting the 2.0 HTML code:
That's it, if you publish the post/page the Pipe recorder will show up when visiting that page.
The Custom HTML block will accept both the 1.0 and 2.0 embed codes from Pipe and even multiple recorders on the same page (when using our 2.0 embed code).
Classic editor
Many WP users do not like the new Gutenberg editor so they install the Classic editor plugin to continue to use the Classic editor instead. The Classic Editor is an official WordPress plugin, and "will be fully supported and maintained until at least 2022, or as long as is necessary".
Embedding the Pipe recorder when using the Classic editor is just as simple. Just copy and paste the Pipe embed code into your post or page while in Text mode as an Administrator or Editor (in a multisite installation you need to be the Super Administrator).
In a normal single site installation of WP you need to be an Administrator or Editor to be allowed to add custom JS/HTML code to posts and pages. Adding the Pipe embed code as an Author or Contributor will result in part or all of the code being removed.
In a multisite installation you need to be a Super Administrator to be allowed to add custom JS/HTML code to posts and pages (the unflitered_html capability governs who can).
The Classic editor supports both our original 1.0 embed code and the 2.0 HTML and JS embed codes including multiple recorders on the same page/post. Here's how to add 2 recorders to the same post using our 2.0 HTML code:
