The University of Arizona

Adding Video

UAHS no longer host video files on our servers. Video files need to be hosted on a streaming service such as YouTube or Vimeo.

For instructions on adding video to a Quickstart site, see the Quickstart editing documentation page.

To add videos to your web page and to be sure that they are responsive to mobile devices you will need to get comfortable working with the page code.

There are a now a number of new video embed styles that let you embed and resize responsive video. Video sizes would be either 100%, 80% or 50% of the container space and called in the videowrapper-XX class (see below).

Code for videos:

<div class="videowrapper-80">
    <div class="embed-container"><iframe allowfullscreen="" mozallowfullscreen="" src="[VIDEO SOURCE GOES HERE]" webkitallowfullscreen="" frameborder="0"></iframe></div>
</div>

Instructions for adding video

  1. Go to the page that you want to embed your video and click edit.
  2. Adding the video code to the page needs to be done within the Source Code.  To access the source code select FULL HTML in the Text format dropdown.
  3. Within the text editor you will now see a Source button.  Click the Source button. You are now viewing the code.
  4. Copy the video code above and paste it into the Source Code view of the page you are editing.
  5. now go to your video source (Vimeo or YouTube) and click the Share link/button.
  6. In the Share window you are looking for the Embed code.  You will also have options to remove various commercial features that these hosting services provide with their embedded videos by default.  You should uncheck all the options that you do NOT want to appear on your video within your page.
  7. Copy the provided embed code.
  8. Paste that embed code below the video DIV code that you previously added.  This new code is only temporary and you will remove it when completed.
  9. From Embed code, hightlight ONLY THE SRC CONTENT.  This is the SRC code that contains the video link.  Be sure that you only select the SRC="..." and nothing else.
  10. Replace the SRC code on the provided embed code with the your the SRC code that you just copied.
  11. Delete the pasted embed source code.
  12. You can click the Source button to go back to standard edit mode.  You should see a red outline called iframe within the editor widow.
  13. Save your page.