Videos

A picture is worth a 1,000 words; a video is worth a million

Great video can tell a story in a way nothing else can. Whether it's an interview, a speaker, or a well-crafted video about a project your department has been working on, post it to YouTube and use Video: Click to Play, Generic Block: Image List, Generic Block: 3 Columns, or a WYSIWYG editor's Video Embed to add it to your page.

Dr. Bernice A. King speaking at 2022 Grinnell College Commencement
This is a video added using the WYSIWYG video option with "display as" = "full"

Prepare Your Video

Before you add your video to Drupal, make sure you meet College standards and have everything you'll need.

Tips for helping make your video quality good enough.

  • Record with an excellent camera.
  • Learn how to shoot your subject effectively.
  • Gather audio from a microphone such as a lav mic or presenter's microphone. If presenter is online, e.g. a Skype call or webinar, capture the original audio and video from the computer.
  • Edit out dead space or other things that take up a lot of time on the video.

If you are recording a lecture or presentation:

  • Include any visual aids. You can do this while recording the presentation by switching camera angles, but make sure you get clear shots of the visuals if you do so. Alternately (and preferably) get the originals from the presentation, such as any PowerPoint slides, and incorporate them directly into the video.

Make sure you have permissions from the speaker, performers, copyright holder, etc., before posting the audio.

For speakers, we recommend you ask for a release that allows you to record and post the audio in the contract.

For accessibility and usability, you must provide:

Transcripts
Text alternative to video that includes information about both the sound (spoken words, music, applause, etc.) and visual information (such as slides, gestures that convey meaning, images) that are included in the video.
Closed captions
Text alternative that displays in sync with the video for those who can't hear the video. Captions should include spoken words as well as sounds like applause and laughter, descriptions of music, etc.
Audio descriptions
An audio description of visual information provided in the video. This can often be added to silences in the video. For example, you may need to have a narration of something that isn't spoken of in the video. Note: Audio descriptions are not currently supported by YouTube so you will need to add a link to the audio description. At this point, if you provide a suitable transcript, we allow that.

Tips:

  • Reuse: For speed and accuracy, you may want to create a transcript, then edit it lightly to use it for the closed captions.
  • Get Help: If you have a longer video, you can hire a service such as Rev.com who can create the transcripts for you. Many services will charge you $1/min of video. Your area will be responsible for the costs.
  • Edit Captions on YouTube: When you load a video to YouTube, it will try add automated captions. These are not of good enough quality to leave as they are. Even if the words are correct, they do not have the required punctuation, descriptions of non-language audio, and indication of who's speaking if there are multiple speakers. You can, however, use the YouTube tools to edit their captions. When you are satisfied, you can download the .srt file for use on other systems such as Facebook.
  • Visit WebAim: See their Captions, Transcripts, and Audio Descriptions article.

Load your video to your department or office YouTube account. If you don't have one, contact us so we can consider loading it to Grinnell College's main YouTube channel.

You must provide a closed caption file or a transcript with your video.

If your video has visual information that isn't covered in the audio, you should also include an audio descriptions track.

See YouTube help for instructions on:

The placeholder image will appear on the site with a superimposed "play" icon.

Your placeholder image should:

  • Be approximately 2000 px wide.
  • Be 16x9 width to height ratio (similar to the video)
  • Be a simple image without major text or video control. (In other words, if you take a screenshot from the video, which we recommend, don't use one that shows the YouTube controls or play button.)

Options for Adding Video

The best way to add a video to our site is the Video: Click to Play component, which will display:

  • A video placeholder image stretched the full width of the page
  • A section header (optional) as small text about the title text
  • Title text (recommended) as a Heading 2 above the play button
  • A play button

When the user clicks on the image, the video will open full size in an overlay.

To add an image with Video: Click to Play:

  1. Prepare your video, including loading it to YouTube or Vimeo, adding captions and audio descriptions, and preparing a transcript and a placeholder image. You'll also need the URL for the video.
  2. Add a video: click to play component.
  3. Enter a section header (optional). We recommend using the title text rather than the section header for images.
  4. Enter the video URL.
  5. Load your placeholder image.
  6. Add title text (optional). The title text overlay displays a large text above the play button.

With title text, it will look something like this:

Screenshot showing the video click to play with title text and section header and a play button
Screenshot showing image list with video option

You can add a video with the Generic Block: Image List component.

Important! You must add a placeholder image as well as a link to to the video! Otherwise, the play button will appear on a white background and make no sense to your visitors.

To add a video using an image list:

  • Add a Generic Block: Image List component and add a block.
  • Add your placeholder image to the Image field. (See Adding Images for full instructions).
  • Enter the video's YouTube/Vimeo link in the Video field.

When your block is published, the placeholder image will have a play button superimposed on it. When a visitor clicks on the image, the video will open and play in an overlay.

To get the best results, we recommend adding videos using a Video: Click to Play component.

Video embed icon which looks like a play button

To add a video using the WYSIWYG editor, do the following:

  1. Prepare your video, including loading it to YouTube or Vimeo, adding captions and audio descriptions, and preparing a transcript and a placeholder image. You'll also need the URL for the video.
  2. Place your cursor where you want the video to appear.
  3. Click the video embed icon.
  4. Enter a link to your video in the Video field.
  5. Upload your placeholder image and add alt text describing it. You will see a review screen. Click next.
  6. Select how you want your video to appear: full (recommended) or small.
    • Full: A full video displays at the full width of the content area.
    • Horizontal: A small video can float to the right or left of the content area. Other content can flow around it. Use with caution, as the video will be quite small and may be difficult for some users to see clearly.
  7. Click embed.

Tip:

  • The video doesn't show the placeholder image and play button in the editor. To see what it will look like to users, save your page as a draft.
  • Student's laughing while dining

    Example of an Image List with Video

    Grinnellians

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse mattis leo et metus accumsan posuere. Aliquam tristique sit amet ipsum eu iaculis. Duis sapien orci, eleifend vel lacus nec, dignissim vulputate enim.

    Integer lobortis, urna ac faucibus euismod, enim nulla venenatis tellus, non porta justo ex ut tellus. Aliquam ut ex et libero ultrices euismod ut eget augue. Aliquam a dignissim lacus. Sed quis vulputate dui, at sagittis eros.

Three students in hammocks
Example of a Video: Click to Play Component

Grinnellians

Example of a WYSIWYG Full Video

Technology and Human Rights Tour
This is a full width video

Example of a WYSIWYG Small Video

Raynard S. Kington delivers speech at MLK event
This is a small video floated to the right

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse mattis leo et metus accumsan posuere. Aliquam tristique sit amet ipsum eu iaculis. Duis sapien orci, eleifend vel lacus nec, dignissim vulputate enim. Integer lobortis, urna ac faucibus euismod, enim nulla venenatis tellus, non porta justo ex ut tellus. Aliquam ut ex et libero ultrices euismod ut eget augue. Aliquam a dignissim lacus. Sed quis vulputate dui, at sagittis eros.

Phasellus venenatis nibh nibh, ac vulputate tellus aliquet in. Aliquam fringilla lectus non sapien porttitor semper. Curabitur et bibendum erat. Pellentesque ornare arcu odio, in commodo leo dictum eleifend. Quisque a est erat. Nunc mauris orci, maximus in ante et, bibendum cursus neque. Donec tincidunt elementum felis at consequat. Vivamus interdum neque dolor, ut vestibulum mi volutpat id. Vivamus ornare, nulla sit amet feugiat vehicula, elit lorem hendrerit leo, interdum semper augue libero ac odio.

We use cookies to enable essential services and functionality on our site, enhance your user experience, provide better service through personalized content, collect data on how visitors interact with our site, and enable advertising services.

To accept the use of cookies and continue on to the site, click "I Agree." For more information about our use of cookies and how to opt out, please refer to our website privacy policy.