MediaSpace: How to Embed a MediaSpace Video into a Mines Wordpress Website

Summary

This guide explains how to embed MediaSpace videos on a Mines Wordpress website by enabling the necessary web embed feature and generating the appropriate video URL code.

Body

Step-by-Step Guide for How to Embed a MediaSpace Video

This guide explains how to embed MediaSpace videos on a Mines Wordpress website by enabling the necessary web embed feature and generating the appropriate video URL code.

Open a Web Project Request with Mines Communications and Marketing

  • Contact your Marketing and Communications (Marcom) department to request that the "MediaSpace web embed feature be turned on for your website". This feature must be enabled before proceeding to embed videos on your site.
  • Request URL: https://brand.mines.edu/requests/
  • Note: Mines Communications and Marketing requests may take up to one week to fulfill. Proceed with the remainder of this guide once that has taken place.

Access MediaSpace

  1. Log in to MediaSpace:
    • Open your web browser and log into my.mines.edu with your Mines credentials.
    • Navigate to the MediaSpace tile within my.mines.edu or use the url, mediaspace.mines.edu.
      MediaSpace tile in my.mines.edu

Navigate to the Sharing Options for Your Video

  • Locate the video you wish to embed.
  • Click “Share” just below the video player and title.
    Share button within MediaSpace.

Select the Share Tab and the Embed Option

  • In the “Share” menu, you will see multiple sharing methods.
  • Click on the “Embed” tab to generate the embed code.
    Embed button within MediaSpaceEmbed code provided by MediaSpace.

Extract the URL from the Embed Code

  • Within the embed code, locate the src attribute.
  • You will find a URL between the single (') quotes. Copy only the URL.
    src attribute code highlighted.

Example: https://cdnapisec.kaltura.com/p/5735552/embedPlaykitJs/uiconf_id/54115372?iframeembed=true&entry_id=1_y00cxg8f&config%5Bprovider%5D=%7B%22widgetId%22%3A%221_n8qvlnxw%22%7D&config%5Bplayback%5D=%7B%22startTime%22%3A0%7D

Modify the Video URL

  • Open up a text editor such as Microsoft Word or Google Docs and paste in your video URL.
  • The URL may contain encoded symbols such as &. Replace these with the & symbol.
  • Note: There are three instances of & that will need to be replaced with the & symbol inside the video url.

Example: https://cdnapisec.kaltura.com/p/5735552/embedPlaykitJs/uiconf_id/54115372?iframeembed=true&entry_id=1_y00cxg8f&config%5Bprovider%5D=%7B%22widgetId%22%3A%221_n8qvlnxw%22%7D&config%5Bplayback%5D=%7B%22startTime%22%3A0%7D

Modified URL: https://cdnapisec.kaltura.com/p/5735552/embedPlaykitJs/uiconf_id/54115372?iframeembed=true&entry_id=1_y00cxg8f&config%5Bprovider%5D=%7B%22widgetId%22%3A%221_n8qvlnxw%22%7D&config%5Bplayback%5D=%7B%22startTime%22%3A0%7D

Add the embed code to Your Website

  • Using the Wordpress Divi Builder, create a Text Module where you want your embedded MediaSpace video to appear.
    Divi Builder Text module.
  • Ensure that you are in the Visual editor tab within the text module.
  • Insert the following code inside a Divi Text Module's Body text field:
    • [kaltura_video url="example URL"]
  • Replace example URL text with your modified video URL inside the quotation marks.  (Do not delete the quotation marks)
  • Complete code: [kaltura_video url="https://cdnapisec.kaltura.com/p/5735552/embedPlaykitJs/uiconf_id/54115372?iframeembed=true&entry_id=1_y00cxg8f&config%5Bprovider%5D=%7B%22widgetId%22%3A%221_n8qvlnxw%22%7D&config%5Bplayback%5D=%7B%22startTime%22%3A0%7D"]
    Text module embedded code.

Best Practices

  • Page-Specific Approval: Ensure that each individual webpage where a MediaSpace video is embedded is approved for embedding by Marcom. Without this approval, the videos may not display properly.

  • Use for Featured Public Videos: This embedding method should only be used for featured public videos that are meant to stand out. For a large collection of videos, consider directing users to MediaSpace Channels, which provide a more scalable solution.

Details

Details

Article ID: 153403
Created
Wed 10/16/24 9:45 AM
Modified
Tue 10/22/24 7:54 PM