Section Menu

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 navigating involved in this tutorial occurs once logged in to OU Campus. For instructions on how to log in, watch the Tour video. Be sure to log in from the department’s homepage.

  1. The first step when inserting a video into a page is 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' 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 Beet. Now, choose the Insert Predefined Snippet Content icon that appears at the end of the second row of tools in the WYSIWYG.
    Video screenshot: step 3
  4. The Snippet window will appear. In the drop-down menu for Category, choose Video. In the drop-down menu for Snippet, 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
    Video screenshot: step 4b
  5. A yellow box will appear in the WYSIWYG. Click on the yellow box and click on the Insert/Edit Embedded Media icon (looks like a film strip) in the middle of the second row of icons.
    Video screenshot: step 5
  6. The Insert/Edit Embedded Media window will appear with the placeholder video information in place. Replace the File/URL placeholder with the one copied in Step 1. Do not change Type (it adjusts automatically based on the video URL). Do not edit Dimensions; this will interfere with responsiveness. Click Insert 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 7a
    Video screenshot: step 7b

Congratulations! You successfully inserted a video into a page.