Embed a Video

Summary

This page will help you display a video on your website. Note that the College does not host videos on our websites. Due to this practice, Site Content Editors (SCEs) will need to first upload their video to a video streaming platform (Vimeo, Microsoft Stream, or YouTube) and then follow the respective set of instructions provided below.

Page Content:

Before embedding…

Be sure that videos have the necessary closed captioning, follow ADA compliance, and College branding rules.

Vimeo

There are two ways to embed a Vimeo video to your WordPress website. SCEs can simply use the Vimeo block or use the [kframe src] shortcode method to adjust the size of the video on the page.

Vimeo Block

  1. Select the add block icon
  2. Type and select the Vimeo in the block search bar
  3. Copy and paste the Vimeo video URL into the field

Kframe Shortcode

The k frame shortcode method is best used when the video size needs to be adjusted to fit the layout of a page. SCEs will need to:

1. Inspect the page to find the appropriate video size needed

  1. Add the block you would like the video to appear in
    (This may be a column or shortcode block)
  2. Preview the page
  3. Right click on the section where the video will appear
  4. Select inspect to pull up the Chrome Dev Tools
  5. Make sure the Elements tab is selected and hover over the elements until you see the respective container dimensions

2. Grab and edit the iframe src code

  1. Go to your Vimeo video
  2. Select the Share button on your Vimeo video
  3. Select the +Show options text
  4. Scroll down to the Size section and select the Fixed Size radio button
  5. Enter the container dimensions you acquired from locating the video size
  6. Copy embed code section
  7. Paste embed code into Notepad (PC users) or TextEdit (Mac users) and only keep the src parameter

    Example: https://player.vimeo.com/video/490933488?h=fcbeddb16e&title=0&byline=0&portrait=0″ width=”750″ height=”422″ frameborder=”0″ allow=”autoplay; fullscreen; picture-in-picture” allowfullscreen

3. Add the iframe src code to the WordPress shortcode block

  1. Add the shortcode block
  2. Enter the syntax: [kframe src=]
  3. Paste the src parameter after the = sign
  4. Add an end bracket

    Example: [kframe src=https://vimeo.com/embed/video/3ca5ac2f-b622-4d6b-b6fe-1c9fbfaf33bd?autoplay=false&showinfo=true]
  1. Go to your Vimeo video
  2. Select the Share button on your Vimeo video
  3. Select the +Show options text
  4. Scroll down to the Size section and select the Fixed Size radio button
  5. Enter the container dimensions you acquired from locating the video size
  6. Copy embed code section
  7. Paste embed code into Notepad (PC users) or TextEdit (Mac users) and only keep the src parameter

    Example: https://player.vimeo.com/video/490933488?h=fcbeddb16e&title=0&byline=0&portrait=0″ width=”750″ height=”422″ frameborder=”0″ allow=”autoplay; fullscreen; picture-in-picture” allowfullscreen

Microsoft Stream

Microsoft Stream is a secure platform where students, faculty, and staff can upload, view, and share videos within the College. It is also important to make sure your viewing settings are set appropriately. Please visit the video streaming page on the Information Services website for detailed instruction on how to use Microsoft Stream.

To embed a Microsoft Stream video to your WordPress website, use the [kframe src] shortcode paired with the src parameter of your Stream video.

The value of the src parameter can be found by:

  1. Select the Share button on your Microsoft Stream video
  2. Select the Embed tab
  3. Under the Copy embed code section, copy the url in the src parameter (without the parenthesis)

To embed the video onto your WordPress page:

  1. Add the shortcode block
  2. Enter the syntax: [kframe src=]
  3. Paste the src parameter after the = sign

    Example: [kframe src=https://web.microsoftstream.com/embed/video/3c5ac2f-b622-4d6b-b6fe-1c9fbfaf33bd?autoplay=false&showinfo=true]

YouTube