Adding Videos and Interactive Content

☆ How to embed from YouTube, Vimeo, or SoundCloud

If you’re planning to embed videos or podcasts that you’ve created to a site like YouTube, Vimeo, or SoundCloud, you’ll first need to upload your media on the platform of your choice. Once you’ve uploaded your content, you can embed it on your site,

1. Navigate to your video on YouTube or Vimeo.
2. Copy the URL of the video from the browser address bar.
3. Navigate to the post where you want to add the content and add a new paragraph block.
4. Paste the URL into the new paragraph block. The content should embed automatically.

☆ How to embed media hosted in Panopto

If you’ve create a video or podcast for a class and your instructor had you submit it via Panopto, you can use a Share link from Panopto to embed your media.

1. Copy the Share link to your Panopto Video.
   • Haven’t uploaded your video? Need to find your share link? Check these instructions.
2. Navigate to your WordPress Post.
3. In you WordPress post, use the Block inserter to add a Panopto Media block. If it doesn’t appear immediately, use the search bar in the Block inserter to search for Panopto.

3. In the block, paste the URL and choose the embed button.

4. The Panopto embed tool will not preview your video properly, but will refresh and display an error message that says: “Invalid url. Please enter a valid Panopto video or playlist embed url.”

5. Even with an error message, your podcast should still display. In the top toolbar, choose the Preview button > Preview in a new tab to check your post and make sure you’re able to see your podcast.

☆ Adding a transcript using the Details block

You can include a transcript of your video or podcast using the Details block, which allows you to create an accordion or dropdown feature with content that your viewer can open and close. You can also control whether the transcript is open or closed when a visitor first looks at your page.

To add the details block

1. Navigate to your WordPress post or page.
2. Use the Add Block icon to open the block inserter and search for Details to add the Details block.
   
3. The details block will be added to your post.

You can find more information on configuring the Details block at Details Block on WordPress.org.

☆ Adding a transcript or other interactive content with H5P

You can include a transcript using H5P, an interactive content creation tool. These directions will give you the basic instructions for creating and embedding H5P content into a WordPress page or post, and includes links to common H5P content types, including an accordion.

1. From your WordPress dashboard, navigate to H5P and choose Create.
2. From the H5P content list, choose the Content type you’d like to include. For a transcript, choose accordion.
3. Once the content builder opens, add a title and any other required content.
   • For a tutorial on creating an accordion for a transcript, visit Accordion
4. When you’re finished adding content, select Create in the top corner.
5. The content builder will close and you will see a preview of your new content.
6. In the right corner of the page, where the Create button was, you will see a new piece of text called a short code. It will look like this: [h5p="1"]
7. Copy the short code, then open the WordPress post or page you’d like to add the content to and paste the short code.

☆ H5P content types

• Accordion – Used for Transcripts
• Image Hotspots
• Image Slider
• Agomotto

The following video shows an example on how to create an accordion on H5P. Accordions are useful when including a transcript or references.