ITS

Information Technology Services
Information Technology Services

Embedding Content

Learn how to insert single videos, or a playlist of videos into a platform outside of the Streaming Service. The following sections provide instruction on obtaining content or playlist IDs and video or playlist embed codes from your streaming library, and how to insert your videos into platforms, such as the Queen’s Wiki, onQ, WebPublish, SharePoint, and other platforms with HTML support.


Embedding a single video using the Content ID

Applies to embedding a video in the Queen's Wiki using the Content ID

Copy the Content ID

  1. Select Media Library from the Navigation pane.
     
  2. Select the   (information icon) located beneath the status of the video.
    screenshot of information icon
    NOTE: A video's publish status must be "Published" for it to display when it is embedded. To publish a video, select the Publish button, and then Publish again.

    screenshot of publishing content

    screenshot of publish form
     

  3. From the Information window, copy the Content ID for the video and paste in a text editor or leave copied to your clipboard.
    screenshot of content ID window

Insert the Content ID into a Wiki Space

  1. In your Wiki page, select Edit (or press 'e').
     
  2. Select the Insert button and select Other Macros (or press Ctrl+Shift+A)
    screenshot of Wiki editor
     
  3. In the Select Macros window either use the search field or scroll to locate Enhanced Queen's Streaming macro.
    screenshot of select macro window
     
  4. The Insert 'Enhanced Queen's Streaming' Macro screen will appear
    • Select Individual video from the Content Type menu
    • Paste the Content ID previously copied into the Ensemble ID field.
    • Enter the display width and height of the video (e.g. width: 360, height: 640).
    • Select Insert when done.

    screenshot of streaming macro form
     

  5. Continue to enter your page content, saving regularly.
    screenshot of video embedded

 

Embedding a playlist/web destination using the Playlist ID

Applies to embedding a playlist in the Queen's Wiki using the Playlist ID

Copy the Playlist ID

  1. Select Playlists from the Navigation pane.
     
  2. Select the   (information icon) located to the right of the web destination.
    screenshot of playlist information icon
     
  3. From the Information window, copy the Playlist ID and paste in a text editor or leave copied to your clipboard.
    screenshot of playlist information window

Insert the Playlist ID into a Wiki Space

  1. In your Wiki page, select Edit (or press 'e').
     
  2. Select the Insert button and select Other Macros (or press Ctrl+Shift+A)
    screenshot of Wiki editor
     
  3. In the Select Macros window either use the search field or scroll to locate Enhanced Queen's Streaming macro.
    screenshot of select macro window
     
  4. The Insert 'Enhanced Queen's Streaming' Macro screen will appear
    • Select Web Destination from the Content Type menu
    • Paste the Playlist ID previously copied into the Ensemble ID field.
    • Enter the display width and height of the video (e.g. width: 360, height: 640).
    • Select Insert when done.

    screenshot of streaming macro form
     

  5. Continue to enter your page content, saving regularly.
    screenshot of video embedded

Embedding a video or playlist using the default Embed Code

Applies to embedding a video in WebPublish, SharePoint, or another CMS or LMS with HTML support.

Copy the Embed Code for a Single Video

  1. From your Media Library, select the Embed button directly beneath the video. The Embed button will only appear if the content has been published.

    screenshot of selecting embed code link
    Note: If the Embed button is not present, check state of the video. If the video has not been published, you will need to publish it before the Embed option will appear.
     

  2. The Embed window offers several options for customizing your embed code.
    Select iFrame from the Mode drop-down menu. If you would like to change the display size, you can do so from the Size drop-down menu.
    screenshot of embed window, select iFrame
     
    If you would like to include social tools, attachments or annotations with your video, select the corresponding check box.
    screenshot of embed options
    For more options, select the Advanced Settings link to expand the section.
    screenshot of advanced settings
     
  3. Once you have finished configuring your embed code, select and copy the embed code to your clipboard and/or copy/paste into a text editor.
    screenshot of  embed code selected

Copy the Embed Code for a Playlist

  1. From Playlists area, select the Embed Playlist button directly beneath the title of the playlist to open the Plug-in Code and Templates area.
     
  2. The Plug-in Code and Templates area offers several options for customizing your embed code.
     
  3. To copy the default embed code, select iFrame from the drop-down menu and then select and copy the embed code to your clipboard and/or copy/paste into a text editor.
     
  4. You can customize your embed code from the Custom Options & Appearance area. Once you have finished configuring your embed code, select and copy the embed code from the Custom Plugin Code area to your clipboard and/or copy/paste into a text editor.

Insert the video or playlist embed code in a WebPublish site

  1. Log into the WebPublish authoring environment (e.g. https://webpublish.queensu.ca/<PubID>)
     
  2. Create a new page or edit an existing draft, in the WYSIWYG editor, select the Source button.
    screenshot of WebPublish editor
     
  3. Locate where you would like the video to appear and paste the embed code.
    screenshot of embed code in WebPublish
     
  4. Deselect the Source button.
    screenshot of iFrame in WebPublish editor
     
  5. Save the page.

Insert the video or playlist embed code in a SharePoint site

  1. Once you are in your SharePoint site, select Edit.
     
  2. Choose the zone to inset you video and select Insert tab and then select Web Part.
     
  3. In the Categories area, select Media and Content folder.
     
  4. In the Parts area, select Content Editor and then select Add.
     
  5. Add content to the Web Part and select “Click here to add new content”.
     
  6. From the Format Text tab, select Edit Source.
     
  7. Paste the embed code into the HTML source window.
     
  8. Select OK.
     
  9. Select Save.

Insert the video or playlist embed code in another HTML supported page

  • Paste the embed code into the HTML portion of your web page. Your video will now be embedded within your web page. The same steps should work on any other platforms with HTML support.

Embedding a video or playlist using the onQ Streaming Service plug-in 

Insert a single video in onQ

  1. In the onQ HTML editor, select the Insert Stuff button.
    screenshot of the above step
     
  2. From the Insert Stuff window, choose the Streaming Service (Ensemble) link.
    screenshot of the above step
     
  3. From the Choose Media window, select the Add button beneath the video to embed.
    screenshot of the above step
     
  4. To change the display settings, select the Embed Media Options link (gear/cog icon).
    screenshot of the above step
     
  5. After configuring the video, select the Submit button to save changes.
    screenshot of the above step
     
  6. Select Save.
    screenshot of the above step
     
  7. Select the Insert button to add the video to the content area.
    screenshot of the above step

Insert a playlist in onQ

  1. In the onQ HTML editor, select the Insert Stuff button.
    screenshot of the above step
     
  2. From the Insert Stuff window, choose the Streaming Service (Ensemble) link. Select the Choose Playlist tab.
    screenshot of the above step
     
  3. From the Select Playlist window, select the Add button beneath the playlist to embed.
    screenshot of the above step
     
  4. Select Save.
    screenshot of the above step
     
  5. Select the Insert button to add the video to the content area.
    screenshot of the above step