How to insert and style a video

This instructional explains how to insert a video and how to style it properly so that the video is responsive and therefore valuable for the user no matter what device is used to view the video. For more information on styling video, review the Responsive Video Snippets tutorial.

University servers should not be used to store video. The ideal way to store and manage videos is by using YouTube or Vimeo. Both of these sites handle and stream video extremely well and are ideal partners with responsive web pages. You may want to consider creating a channel for collecting all videos in one place. Each service has features that can be customized to make videos public or private. Be sure to reference their individual support pages to understand how the service operates.

NOTE: All uploading and navigating involved in this tutorial occurs once logged in to OU campus. Be sure to begin log in from the department’s homepage.

  1. Find the desired video in a browser. This tutorial will use a video from YouTube. When the video is located, copy the URL (web address from the navigation toolbar). This will be used in Step 6.
    Video screenshot: step 1
  2. Return to OU Campus. Navigate to the page needing a video and click Edit at the top of the window. Then click the green Edit Content Area button in the content area that requires the video. This will launch the WYSIWYG editor window.
    Video screenshot: step 2a
    Video screenshot: step 2b
  3. After determining the approximate location for the video, place the cursor next to the text in that area. The video for this tutorial will appear in the middle of the page, so the cursor is placed next to the word Heading 2. Now, choose the Insert Snippet, indicated by the arrow.
    Video screenshot: step 3
  4. The Snippet window will appear. In the drop-down menu, choose Video / Embedded Media. In the list menu, choose the appropriate styling for the video being used. See examples and an advanced tutorial to understand the differences. This tutorial will utilize Wide/HD. After choosing the snippet style, a placeholder video will appear. Now, click Insert at the bottom of the window. If it is necessary to change the style of a video after initial creation, repeat this step and delete the initial instance of the video.
    Video: screen shot 4a

  5. A gray box will appear in the WYSIWYG. Click on the gray box and click on the Insert/Edit Video icon (looks like a film strip) in the middle of the second row of icons.
    Video screenshot: step 5
  6. The Insert/Edit Video window will appear with the placeholder video information in place. Replace the Source placeholder with the one copied in Step 1. Do not edit Dimensions; this will interfere with responsiveness. Click OK when complete.
    Video screenshot: step 6
  7. The video is ready. Save the page. The video will appear in the text and can be played. Note: the size of the video will appear as wide as the column that contains video. Experiment with one and two column layouts to find the desired playback size for the video. Keep in mind that videos are best when viewed large.
    Video screenshot: step 7b

Congratulations! You successfully inserted a video into a page.