Embedding videos (Media Site and other external sites)

This Articles applies to: Content/CMS Editors, Content Creators
Disclaimer: The use of YouTube to embed videos on your site using the "Better YouTube Widget" in Kentico is preferred.  If that method is not possible, you may upload it to Mediasiteafter you have created an account. It is not possible to upload and stream videos directly on the Kentico web server due to performance and storage issues. 

The following 3 sections will walk you through the entire process of  displaying videos on your website:

Section 1 : Requesting a Mediasite account
Section 2 : Upload videos to Mediasite
Section 3 : Embed your video on to your site


 

Section 1. Requesting a Mediasite account

FOR CLIENTS (Getting a Mediasite Account):
  1. Request a Mediasite account by submitting an email to the Office of Learning Technology Services (OLTS) through the Office of Academic Innovation at aihelp@tamu.edu. Please provide your UIN & NetID.
  2. In the email, ask for a new Mediasite “Shared Folder” to be created for use by your unit/office’s Kentico Website Editors to save your videos/presentation to (unless a shared folder has already been created for your Kentico websites).  If it has, then you will request access to that shared folder.
  3. The new Shared Folder should be placed under your office/unit’s hierarchical folder structure in Mediasite and be a subfolder named “Kentico”.  So if you work in the Office of Admissions, you would request a shared folder to be created called “Kentico” under the “Office of Admissions” parent folder.  In our example below, you will see a “Kentico” Shared Folder under the “Provost IT Office” parent folder.
  4. Be sure to contact OLTS (send an email to aihelp@tamu.edu​) to update the Mediasite shared folder’s list of valid users when one of your Kentico website editors terminate/transfer to another department outside of your office and should no longer be allowed to manage your videos.
  5. All videos must have closed captioning or a written transcript accessible from the same page the video is embedded/linked from on your website.
 

Section 2. How to upload a video to Mediasite for embedded streaming

Please navigate to the link below to learn how to Upload a video to Media site.
https://learn.mediasite.com/course/uploading-your-first-video-presentation/

 

Section 3. Embedding Mediasite Hosted Videos on Your Website

1. After you have uploaded your video to Mediasite, you will need to change some settings in Mediasite before you embed the video on your website.

2. First, you will  need to change the visibility settings to allow “Everyone” to view your video on your public website:
  • Navigate to the Video/Presentation info and settings screen by clicking on the video you would like to embed. You should see a similar page to the screenshot below
  • In the “Who Can View” section, move the slider to “Everyone”mediasiteslide.png

3. Change the player used by Mediasite for your video:
  • Click on the Edit Details link on the right of the video.
  • On the Edit Presentation page, click on the Player tab.
  • Select either the "PITO - Kentico Embed" player, or the "Mediasite - Mini Player".
  • Click the Save button.

4. Upload the video transcript/closed caption text for your video:
  • Click on the Edit Details link on the right of the video.
  • On the Edit Presentation page, click on the Delivery tab under the video.
  • Check the box for Audio Transcriptions.
  • Browse to and upload your .vtt (video transcript file).
  • Click the Save button.

5. Upload a Presentation Thumbnail if you want one.
  • Click on the Edit Details link on the right of the video.
  • On the Edit Presentation page, click on the Delivery tab under the video.
  • In the Presentation Thumbnail field, click the button to browse and select your image to use as a cover image.  This image wil be displayed before the user clicks the play button to play your video.
  • Click the Save button.

6. In another Internet browser tab, Log into your website's Kentico Admin Dashboard.
(Use https://<sitename>.tamu.edu/admin to go to the dashboard page)


7. From the 'Dashboard' webpage follow the steps listed in the below figure to access the content tree.

      
'Pages' webpage has the content tree on left as highlighted in the below figure.
     


8. Select the page in which the video is to be embedded from the content tree and click on Check out.p3i1.PNG

9. 
Click into the editable text box to place a cursor in the exact spot on the page you would like to embed the video on and click on the widget button widgetbutton.png on the WYSIWYG toolbar.
widgetbuttonBig.png


10. In the Select Widget popup window, type “HTML” in the search bar to find and select (click on) the Static HTML widget.  Click on the Select button.


11. In the Widget properties (Static HTML) popup window, click in the Text field and copy/paste in this code: <script data-url="REPLACE_URL_HERE" src="//pitocdn.tamu.edu/CMSPages/GetResource.ashx?scriptfile=/CMSGlobalFiles/js/mediasite.js" type="text/javascript"></script>
widgetText-(1).png
  • This script generates a responsive frame for the video to reside in that will take up the full width of the container it is placed in, but you may run into instances where you would like the width to be smaller. To do so, copy and paste in the code below (instead of the code above), and replace 'REPLACE_MAX_WIDTH_HERE' with the size in pixels (px) you would like it to be, for example '500px'.
  • <script data-url="REPLACE_URL_HERE" data-max-width='REPLACE_MAX_WIDTH_HERE' src="//pitocdn.tamu.edu/CMSPages/GetResource.ashx?scriptfile=/CMSGlobalFiles/js/mediasite.js" type="text/javascript"></script>
     
12. Go back to the Mediasite website (https://mediasite.tamu.edu/Mediasite/MyMediasite) video presentation settings page for your uploaded video, and click on the “Share Presentation” button in the Share section:sharepresentation.png

13. In the popup that pops up, click on the Copy button to get the link copied to your clipboard.copy-button.png

14. Once the link is copied to your clipboard, go back to the Kentico site Widget properties (Static HTML) popup window and replace the text “REPLACE_URL_HERE” with the copied URL.

15. On the resulting window, click on Save followed by Check in and Publish. You may review your content on the preview tab before clicking Publish.  You will see a widget icon where your video is embedded on the editor interface for Kentico.