Embed Videos in CMS

Want to post videos in the Andrews CMS?  First you need to create a departmental youtube channel (click here to go to that article) before you can go about uploading videos in the CMS.


In Youtube:
Once the video is uploaded to youtube, (we recommend having an official Andrews University youtube account which all professors can access) you will need to look for the Share button  (right under the username, and right of "add to") on the videos page.

A new drop down will appear and you will see Share, Embed, and Email. Click on Embed.

You will see a box with <iframe width="560" height="315" ....> in it.  We only need a portion of this text.  Grab all the information within the " " of the src= section.  An example is below:  

The full youtube embed code is this:  <iframe width="560" height="315" src="https://www.youtube.com/embed/13ZHIxcAAxQ" frameborder="0" allowfullscreen></iframe>

We only want the following portion:  https://www.youtube.com/embed/13ZHIxcAAxQ  You will see it is colored red above to give you the exact location within the youtube code. Copy that information to your clipboard (cmd+c or ctrl+c) to use in the CMS.


In Andrews CMS:
Now that you have the youtube code we need to place it in a specific wrapper.

<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>

Place the code you copied where the ... is. For our example above the code will look like this:

<div class="embed-responsive embed-responsive-16by9">
<iframe allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" class="embed-responsive-item" frameborder="0" src="https://www.youtube.com/embed/mWLquZHlBhU"></iframe></div>

Again the code is colored red to show you exactly where it goes.

Now that we have this, you need to copy that entire code to you clipboard.

Now lets learn how to add this information to homepages or department content pages.


CMS Homepages:
On Homepages we recommend using the Caption/Description area. Paste the code into that box and you are done.


CMS Department Content:
On a regular department content page you will need to add to go into the source code and place the video in the appropriate place. This can be a tedious task, but if you do feel you need assistance with this, please call Darren Heslop at extension 3316 and he will help walk you through it.


The first step to add a video to your page is to locate where the video needs to go.  In the CK Editor, find this location and type the following text (Place Video Here) where you want the video to go. 

Now click on the Source Button.  You will be greeted with a page that has lots of <p> <h3> etc in it.  That is good.  We will now use the search function on your browser to find the text we just typed in a minute go.  Press ctrl+F or cmd+f on your computer to bring up the search box.  Type in "Place Video Here" into the search field. The Search field will highlight your text in the Source code.  

You will need to paste the youtube code in place of this text.  

becomes this:


now click the Source button again to go back to the normal CK Editor view.

You see there is a IFrame box in the CK Editor now.  This is your youtube code.  You can save the page and preview it to ensure the video play properly. 

If you video appears and plays properly, then congratulations you have uploaded a video into the CMS.


Have more questions? Submit a request


Please sign in to leave a comment.
Powered by Zendesk