How Do I Add the Resi Player to a Wordpress Site?

  • Updated

Resi makes it easy to distribute your content across multiple destinations, including your own website. Whether you’re an experienced web designer or learning how to build a site for the first time, you may consider using Wordpress. As one of the most popular open-source web development tools, you’ll be able to find plenty of support in creating and hosting your website. In addition, getting your content from Studio to your website is easier than ever. If your streaming service plan allows for web distribution, you can broadcast live or saved content to your website in just a handful of steps.

Copy Your Embed Code

Before you can embed your video into your Wordpress website. You will need to make sure you locate and copy the embed code you would like to use. If you would like to learn more about the embed codes generated by Studio, you can read our article on how to Embed Your Stream in a Website.

  1. You can find your embed code through one of the following methods:
    • Navigate to your Web Channel Settings and click the Embed tab.
    • Open an event in the Schedule and click the share button next to your web channel.
    • In the Library, open the video details page and click the share button image2.png.
  2. Make sure the iFrame option is selected.emebed_in_wp_copy_code.jpg
  3. Copy your embed code.

Paste Your Embed Code in a Block

Wordpress uses a webpage element known as “blocks” in order to house specific types of content, such as embedded images and videos. The use of content blocks makes it easy to embed your video that is being stored or streamed with Resi.

  1. Open the page to which you would like to add a video.
  2. Place your cursor where you want the video to be.
  3. Type “/” to open the content block options.emebed_in_wp_select_block.jpg
  4. Select the Custom HTML option.
  5. Paste your embed code into the text field.emebed_in_wp_paste_code.jpg
  6. Click the Update button to save the page.
  7. Click the Preview button on the block if you would like to see the video.emebed_in_wp_preview.jpg

Paste Your Embed Code in HTML

If you know how to write in HTML and would like more granular control of the positioning and other elements of your embedded video, you may consider using the source code editor instead of content blocks.

  1. Open the page you would like to add a video to.
  2. Click the image1.jpg  button in the right-hand corner of the page editor.
  3. Select the Code Editor option.emebed_in_wp_code_editor.jpg
  4. Paste the embed code wherever you want it to appear on the page.emebed_in_wp_source_code_highlight.jpg
  5. Click the Update button to save the changes to the page.
  6. You can switch back to the Visual editor to get a preview of your video.emebed_in_wp_source_code_preview.jpg
Was this article helpful?
0 out of 0 found this helpful