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 department employees 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 pop-up window will appear and you will see a variety of options available. The default option is "embed" (the one you want) and all you need to do is click the word "copy" on the right-hand side.

 

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

  1. Paste the code you received from youtube into a document editor like wordpad, word, text edit etc.
  2. Copy this text and place it in the same text editor you just pasted the youtube code into
    <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="..."></iframe></div>

You document should now look like this:

https://youtu.be/arZNZASr1qs

<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/..."></iframe></div>

You now need to take the last part of the youtube link (in this case it is arZNZASr1qs) and place that where the red ...'s are.  

 

Your code will now 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/arZNZASr1qs"></iframe></div>

 

I have left the youtube code red so you can see exactly where it goes inside the script for embedding videos

Now copy the entire code you just created and prepare to copy it into the CMS.

 

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

0 Comments

Please sign in to leave a comment.
Powered by Zendesk