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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.