Build Videos

Page Content

Videos

Videos are a fun and engaging way to capture your users’ attention and bring your content to life. Unlike images or PDFs, video files cannot be hosted directly on the website through the T4 Media Library. Instead, before adding a video content type, you’ll need to upload your video to a streaming platform like YouTube or Kaltura.

Once uploaded, you can use an embed code to seamlessly link the video to your webpage, ensuring smooth playback and a dynamic user experience.

Adding videos 

There is no way to directly host a video file on the website as we do with images or PDF files in the T4 Media Library. Prior to adding a video tile, the video you'd like to share needs to first be added to Mayo's YouTube channel. On the intranet, there are helpful tips for programs on how to get a video added to Mayo's YouTube Channel. 

Which video streaming option is preferred?

YouTube is the preferred video option at this time based on the combination of shareability and performance. Kaltura is acceptable for video tiles, but should not be used for Inline Media due to poor performance.

Modifying the YouTube embed code

Modifying the YouTube embed code

For our purposes, the embed code we grab off of YouTube pages is insufficient for accessibility, analytics, and responsive sizing. The following steps show how to alter the code appropriately.

  1. Click Share, and select Embed
  2. Copy Embed Code, should look something like this: <iframe width="560" height="315" src="https://www.youtube.com/embed/yakvUhwR8OY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  3. Add an id specific to this video inside the iframe tag: 'id="short_video_title"'
  4. Add a title specific to this video inside the iframe tag: 'title="Video: Video Title or Description"'
  5. Add tracking code '?enablejsapi=1&origin=https://college.mayo.edu&rel=0&cc_load_policy=1' to the end of the URL in the src="https://www.youtube.com/embed/yakvUhwR8OY" attribute.
  6. For Video tiles only: Change the 'src' attribute to 'data-src' Then add an empty 'src=""' attribute.
  7. Your final version should be something like this: <iframe width="560" height="315" id="short_video_title" title="Video about this particular topic explaining these particular things" src="" data-src="https://www.youtube.com/embed/yakvUhwR8OY?enablejsapi=1&origin=https://college.mayo.edu&rel=0&cc_load_policy=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  8. Paste embed code into the appropriate content element for Inline Media, Tile:Video, or Sidebar:Video.

Modifying the Kaltura embed code

Modifying the Kaltura embed code

Similiar to YouTube, the Kaltura embed codes require some editing. The following steps show how to alter the code appropriately.

  1. Click Share, and select Embed.
  2. Make sure the Player Skin radio button is set to "Mayo Player"
  3. Copy Embed Code, should look something like this: <iframe id="kaltura_player" src="https://cdnapisec.kaltura.com/p/1825021/sp/182502100/embedIframeJs/uiconf_id/29327221/partner_id/1825021?iframeembed=true&playerId=kaltura_player&entry_id=0_vdxhek2o&flashvars[streamerType]=auto&flashvars[localizationCode]=en&flashvars[leadWithHTML5]=true&flashvars[sideBarContainer.plugin]=true&flashvars[sideBarContainer.position]=left&flashvars[sideBarContainer.clickToClose]=true&flashvars[chapters.plugin]=true&flashvars[chapters.layout]=vertical&flashvars[chapters.thumbnailRotator]=false&flashvars[streamSelector.plugin]=true&flashvars[EmbedPlayer.SpinnerTarget]=videoHolder&flashvars[dualScreen.plugin]=true&flashvars[hotspots.plugin]=1&flashvars[Kaltura.addCrossoriginToIframe]=true&&wid=1_9hevtw9g" width="400" height="285" allowfullscreen webkitallowfullscreen mozAllowFullScreen allow="autoplay *; fullscreen *; encrypted-media *" sandbox="allow-forms allow-same-origin allow-scripts allow-top-navigation allow-pointer-lock allow-popups allow-modals allow-orientation-lock allow-popups-to-escape-sandbox allow-presentation allow-top-navigation-by-user-activation" frameborder="0" title="Kaltura Player"></iframe>
  4. Update the id attribute from "kaltura_player" to something specific to the video: 'id="short_video_title"'
  5. Update the title attribute from "Kaltura Player" to something specific to this video: 'title="Video: Video Title or Description"'
  6. Add the code '&flashvars[controlBarContainer.hover]=true' to the end of the URL in the src="" attribute. This fixes the issue with "pillarboxing".
  7. For Video tiles only: Change the 'src' attribute to 'data-src' Then add an empty 'src=""' attribute.
  8. Your final version should be something like this: <iframe id="short_video_title" src="" data-src="https://cdnapisec.kaltura.com/p/1825021/sp/182502100/embedIframeJs/uiconf_id/29327221/partner_id/1825021?iframeembed=true&playerId=kaltura_player&entry_id=0_vdxhek2o&flashvars[streamerType]=auto&flashvars[localizationCode]=en&flashvars[leadWithHTML5]=true&flashvars[sideBarContainer.plugin]=true&flashvars[sideBarContainer.position]=left&flashvars[sideBarContainer.clickToClose]=true&flashvars[chapters.plugin]=true&flashvars[chapters.layout]=vertical&flashvars[chapters.thumbnailRotator]=false&flashvars[streamSelector.plugin]=true&flashvars[EmbedPlayer.SpinnerTarget]=videoHolder&flashvars[dualScreen.plugin]=true&flashvars[hotspots.plugin]=1&flashvars[Kaltura.addCrossoriginToIframe]=true&flashvars[controlBarContainer.hover]=true&&wid=1_9hevtw9g" width="400" height="285" allowfullscreen webkitallowfullscreen mozAllowFullScreen allow="autoplay *; fullscreen *; encrypted-media *" sandbox="allow-forms allow-same-origin allow-scripts allow-top-navigation allow-pointer-lock allow-popups allow-modals allow-orientation-lock allow-popups-to-escape-sandbox allow-presentation allow-top-navigation-by-user-activation" frameborder="0" title="Video: Video Title or Description"></iframe>
  9. Paste embed code into the appropriate content element for Inline Media, Tile:Video, or Sidebar:Video.

Modifying the Wistia embed code

Modifying the Wistia embed code

Use the following embed code as a template to properly display Wistia videos on the website. The following steps show how to alter the code appropriately.

Steps to embed a Wistia video:

  1. Navigate to the page where the video will be added.
  2. Click the Add Content button.
  3. Select Tile: Video.
  4. Inside the content type, fill out the following fields:
    • Type of tile: Full bleed
    • Width of tile: Triple width
    • Smallest Image
    • Bigger Image
    • Sub-Heading: Video length
    • Heading: Title of video
  5. Copy and paste the following code into the Video Embed field, replacing the bolded text with the specific video information then press Save Changes:

<iframe src="https://fast.wistia.net/embed/iframe/e6tko2hrqh" title="Mayo Clinic Dysphagia Occupational Therapy Fellowship: Program Overview Video" allow="autoplay; fullscreen" allowtransparency="true" frameborder="0" scrolling="no" class="wistia_embed" name="wistia_embed" width="600" height="338"></iframe> <script src="https://fast.wistia.net/assets/external/E-v1.js" async></script>

Wistia embed code instructions:

  1. Navigate to the media you want to embed in Wistia.
  2. Click the Embed button at the top of the page.
  3. Select the Fixed Size option.
  4. Click the Show Embed Code button.
  5. Copy the URL and title, then insert them into the embed code in the Video Embed field in T4.

Ready to enhance your content further?

Check out the next module.

Tile: Video
menu
Close