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.
Video content types
There are two content types that can be used to display videos on a Studio Site webpage:
- Studio Site - Video. Use the Studio Site - Video content type to add an attention-grabbing colored block to the page that contains three different videos. Choose between a yellow or teal background color.
- Studio Site - Tile: Video . Use the Studio Site—Tile: Video content type to add a single, double, or triple-width tile containing an image and an embedded video.
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 video embed code
Follow these instructions to modify the video embed code for YouTube and Kaltura prior to adding it to the video embed code field on either of the two Studio Site video content types.
- Modifying the YouTube embed code
- Modifying the Kaltura embed code
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.
- Click Share, and select Embed
- 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> - Add an id specific to this video inside the iframe tag: '
id="short_video_title"' - Add a title specific to this video inside the iframe tag: '
title="Video: Video Title or Description"' - Add tracking code '
?enablejsapi=1&origin=https://college.mayo.edu&rel=0&cc_load_policy=1' to the end of the URL in thesrc="https://www.youtube.com/embed/yakvUhwR8OY"attribute. - For Video tiles only: Change the 'src' attribute to 'data-src' Then add an empty 'src=""' attribute.
- 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> - 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.
- Click Share, and select Embed.
- Make sure the Player Skin radio button is set to "Mayo Player"
- 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> - Update the id attribute from "kaltura_player" to something specific to the video: '
id="short_video_title"' - Update the title attribute from "Kaltura Player" to something specific to this video: '
title="Video: Video Title or Description"' - Add the code '&flashvars[controlBarContainer.hover]=true' to the end of the URL in the
src=""attribute. This fixes the issue with "pillarboxing". - For Video tiles only: Change the 'src' attribute to 'data-src' Then add an empty 'src=""' attribute.
- 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> - Paste embed code into the appropriate content element for Inline Media, Tile:Video, or Sidebar:Video.