Carlsites WordPress: Embedding Media

Introduction

Uploading files directly to WordPress can take up lots of storage space and potentially slow down the loading speed of your website. Embedding items, such as high resolution images or hour-long videos, is a great method of displaying your content without compromising your website’s loading speed and quality. Follow the steps in this article and learn how to embed various file types into your WordPress website.

Google Drive

Google Drive is a great storage solution for file types such as images, videos, audio files and many more. Below include steps for both Google Drive and WordPress.

In Google Drive,

  1. Find and click into the file you want to embed
  2. In the Share options, make sure General Access is set to Anyone with the link
  3. Click Done
  4. Click the 3 vertical dots () menu 
  5. Click Open in new window
  6. Click the 3 dots () again
  7. Choose the Embed item option
  8. Copy the iframe code

In WordPress,

  1. Find the page you want to embed the file in and click Edit
  2. Find the area you want to place the file in
  3. Add the Custom HTML block
  4. Paste the iframe code you previously copied

Panopto

Panopto is a great storage solution for videos and audio files with a thumbnail (e.g. podcast title card). Below are the steps needed to share Panopto videos and embed them in WordPress.

In Panopto,

  1. Find video you want to embed in your My Folder
  2. Hover over the video and click on the Share () icon
  3. Under “Who can access this video“, change the permissions to match Public or Public (unlisted)
    1. Public: anyone can find and access
    2. Public Unlisted: anyone who has a link
  4. Click on the Embed (< >) icon
  5. Adjust the following settings:
    • Autoplay: (y/n)
    • Enable ‘Watch in Panopto’: (y/n)
    • Show Title: (y/n)
    • Show Logo: (y/n)
    • Show Captions: (y/n)
    • Aspect ratio, Width, Height, Start at…, Interactivity
  6. Then click on the Copy Embed Code button

In WordPress,

  1. Find the page you want to embed the file in and click Edit
  2. Find the area you want to place the file in
  3. Add the Custom HTML block
  4. Paste the iframe code you previously copied

Questions?

If you have any questions or would like to know more, submit a ticket and an Academic Technologist can help you.

Acknowledgement 

Created by Em Palencia, 04/05/24.

Was this helpful?
0 reviews
Print Article