Build Videos

Prior to adding a video tile, you will need to select an overlay image for the video tile. Find a semi-related photo in MAM and upload the image to the T4 Media Library folder for the program.

The Tile: Video content type uses CDN PXL so you do not need to resize the image prior to uploading it to the T4 Media Library.

From the T4 Site Structure, navigate to the page you are updating. 

1. Open the Content tab of the page you are working on. 
2. Click Add content.
3. Select the Tile: Video content type.
4. Click Full Bleed and select your desired width (double, square, or triple). 
5. Connect the 'Smallest Image' and the "Bigger Image' to the same image you uploaded in the T4 Media Library:
   • Click Select media.
   • Navigate to the program folder in the T4 Media Library.
   • Select the image you'd like to use.
6. In the "Sub-Heading" content box, type the length of the video (ie, 0:30).
7. In the "Heading" content box, type the title of the video in the following format "Video: Title of Video"
8. Add the modified YouTube embed code in the Video Embed Link content box. 
9. Click Save Changes.

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 the Tile: Video content type.

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.