Overview
In this guide, we review several options for adding videos to your website in Dornsife WordPress:
-
Option 1: Set up a video compilation page
- This is a good option for displaying a collection of videos, similar to a playlist or other themed series
- You can set up automatic or manual video sorting, and create search filters
- Limited ability to add non-video content to this page
-
Option 2: Use components to add videos to any page
- This is a good option for displaying one video or a limited number of videos
- You can add videos in any order and to any page that uses the Default or Content Detail template
- Other types of content or components can be present (and are encouraged) on the page
Before you begin
For each video you want to add, you will need:
- A publicly viewable link to the video
- A thumbnail (still image) of the video
Video link: While you can upload videos to WordPress, the limit of 5 MB means that this is usually not practical for videos unless they are extremely short or compressed. For this reason, we recommend hosting your video on Vimeo or YouTube, which will also provide a public link. Video Pane is the only component that requires the videos to be YouTube links specifically.
Thumbnail: The thumbnail is a still image of your video that appears on your website. When visitors click this image, the video will open in a full-screen lightbox and begin to play. Websites such as Vimeo and YouTube provide options for you to select and download a thumbnail, which you can then upload to WordPress. Generally speaking, while WordPress is flexible on the dimensions and aspect ratio of your linked video, the thumbnail itself should follow the dimensions and aspect ratio that we detail below.
Compiling a video series
This is a good option if you want to showcase a collection of videos—for instance, maybe you want to assemble a series of faculty profile videos, or you need a central location for training videos. Be aware that, because the design is focused on the video experience, this option has limited ability to show non-video content.
To create a video compilation page, you will need to:
- Set up the page using the Video Listing template
- Add each video as a separate video post
Video Listing page appearance
Lightbox appearance once a video is clicked
Video Listing template and video post requirements
- Video aspect ratio and dimensions: Any
- Video link: Vimeo or YouTube recommended
- Thumbnail aspect ratio: 16:9
- Thumbnail recommended dimensions: 1920 x 1080 px
- Featured video: You must select at least one video to appear at the top of the page as a featured video
Video Listing template and video post guidelines
- How to use:
- Appearance:
- The featured video(s) will appear at the top of the page
- A filter option allows site visitors to narrow down the list of videos by keyword (which searches the video titles) or by categories that you set up in advance
- Up to nine videos appear on a page: If you have more than nine videos, page numbers appear at the bottom to allow visitors to continue browsing
- Behavior: Clicking a thumbnail opens the video in a full-screen lightbox
- Text fields:
- Overall page: (required) title; (optional) description
- For each video: (required) video post title; (optional) description, categories
- You can optionally add non-video content at the bottom of the page using Two Column CTAs, Contact Details, or Rich Text
Available video components
You may want to display a video or two on a page alongside non-video content—for instance, maybe you have a page dedicated to resources for new employees or new students, and want to include a welcome video. In such situations, you can add a video component rather than creating a separate video collection page.
The following components can be used on pages with the Default or Content Detail template:
- (recommended) Video with Text
- Full Width iFrame Embed
- Full Width Image + Video
- Rich Text
- Video Pane Component
Not sure where to begin? We recommend Video with Text for quickly adding a video.
Video with Text
Appearance on website
Lightbox appearance once the video is clicked
Video with Text requirements
- Video aspect ratio and dimensions: Any
- Video link: Vimeo or YouTube recommended
- Thumbnail aspect ratio: 16:9
- Thumbnail recommended dimensions: 2000 x 1150 px
Video with Text guidelines
- How to use: Video with Text guide
- Behavior: Clicking the image opens the video in a full-screen lightbox
- Text fields: (optional) title, description
Full Width iFrame Embed
Full Width iFrame Embed requirements
- Video aspect ratio and dimensions: Any
- Video link: YouTube or Vimeo recommended
- Does not need a thumbnail
Full Width iFrame Embed guidelines
- How to use: Full Width iFrame Embed guide
- Behavior: Clicking the video controls plays the video on the page rather than in a full-screen lightbox
- Text fields: (optional) title
Full Width Image + Video
Full Width Image + Video requirements
- Video aspect ratio and dimensions: Any
- Video link: Vimeo or YouTube recommended
- Thumbnail aspect ratio: 16:9
- Thumbnail recommended dimensions: 2000 x 1150 px
Full Width Image + Video guidelines
- How to use: Similar to Full Width Image + Text, but has a field for a video URL
- Behavior: Clicking the image opens the video in a full-screen lightbox
- Text block appearance: Black text on a white rectangular block
- Larger screens: Text block covers part of the right side of the image
- Smaller screens: Text block covers the lower portion of the image
- Text fields: (required) title; (optional) description
Rich Text
Rich Text requirements
- Video aspect ratio and dimensions: Any
- Video link: Vimeo or YouTube recommended
- Does not need a thumbnail
Video Pane
Landscape option, appearance on website
Landscape option, lightbox appearance once a video is clicked
Portrait option, appearance on website
Portrait option, lightbox appearance once a video is clicked
Video Pane requirements
- Landscape:
- Video aspect ratio and dimensions: Any
- Video link: Must be YouTube
- Thumbnail aspect ratio: 16:9
- Thumbnail recommended dimensions: 1200 x 675 px
- Portrait:
- Video aspect ratio and dimensions: Any
- Video link: Must be YouTube
- Thumbnail aspect ratio: 9:16
- Thumbnail recommended dimensions: 900 x 1600 px
- This component requires exactly three videos
Video Pane guidelines
- How to use: Video Pane guide
- Behavior: Clicking the image opens a full-screen lightbox. Then, click the YouTube thumbnail to play the video.
- Text fields:
- Main layout: (optional) title, description, link
- For each video: (required) title; (optional) name, title, and text