Videos
Videos are an important component of the Purdue Northwest story. To be utilized effectively on the PNW site, videos should be both on-brand and accessible. Use this page as a guide for working with video.
Like other materials that tell our stories—brochures, handbooks, websites and social media—videos need to adhere to university brand standards and be consistent in style, tone and message. For information on graphics and fonts that should be used in videos posted on the Purdue Northwest site, contact Marketing & Communications.
*Marketing & Communications does not support the direct streaming of videos except for certain institutional events (i.e. commencement).
Copyright Note: Editors should only use videos for which Purdue University Northwest holds the copyright and video rights. If you have a question about whether a video can be used, please contact the Marketing and Communications team.
Video Preparation
- We embed videos on the PNW website but do not host them directly. All videos must be uploaded to a hosting service, preferably an official PNW Youtube page. While we may be able to embed videos hosted on other services (Kalture, Vimeo), Youtube is our preferred channel and the only one for which we can provide on-site analytics.
- Ensure that your video has closed captions, proper descriptions and titling for accessibility. If videos do not have closed captioning, we will not be able to feature them on the site.
- The thumbnail image that appears at the beginning of the video before it plays needs to brand appropriate.
- The video must be publicly viewable and should be at least 720p.
- Update: Oct. 22, 2022 If you are embedding video directly from YouTube without adding the additional API script (as on some Program pages with the video), you must uncheck the “LazyLoad for iframes/videos” on the sidebar. This will remove the white space we see under the video. If the page needs or requires the box to be checked for a campaign or for speed, let Ryan know so he can enable a special script to force load the API.
Ways To Display Video On The PNW Site
Embed Code
- Embed code is the standard way we display video on the site. To embed code, open the video in Youtube, click share and copy the Embed code text. Return back to WordPress and paste that code directly into the Embed Code.
- Ensure that you add a?rel=0 at the end of the YouTube URL in the embed code. This ensures that the “suggested videos” that show up after a video ends are only PNW content. Otherwise, users can get potentially inappropriate recommendations.
- Embed code videos can appear extremely large on a full-width page; the Feature With Video module may be preferable in this instance.
- If context is necessary, ensure that you have a Title/Intro in a visual editor or appropriate text module above the video.
- Like any visual element, videos need to be balanced with text, and they also have to be curated to avoid overwhelming the page and the user with “stacks” of videos. If you are considering placing multiple videos on a page, it is generally preferable to consolidate them in a single playlist and embed that instead.
- Embedding can be technical.If you are not comfortable adding yourself, please reach out to the web team.
Features w/ Video
- This module should be used if the video highlights a key “selling” point but needs a short context to better support it.
- Follow the same instructions as the Embed code to Embed the Youtube video.
- Utilize the remaining title/text space as you would on a standard Feature.
Tabs
- You can utilize Tabs to embed a video as well when there is a supporting visual piece to a larger piece of content.
- To share a video in the Tab module, simply copy and paste the Youtube embed code directly into the module.
- While embedding videos in tabs is possible, it’s not the first choice as they don’t flex to mobile as the embed code does. Consider whether you can embed your video in the preferred “Embed Code” or “Feature w/ Video” modules.
Accordions
- Similar to Tabs, videos can be included in Accordions with a simple copy and paste of the video’s embed code from
- While embedding videos in accordions is possible, it’s not the first choice as they don’t flex to mobile as the embed code does. Consider whether you can embed your video in the preferred “Embed Code” or “Feature w/ Video” modules.
- If you do use a video in a tab or accordion, extra html code is required to make it responsive. We have provided this code and it just required copy and pasting it in at a specific location on the editor.
- When you pull an iframe code, you get the following:
To make it responsive, you need to do three simple things., First, put it in the following container:
IFRAME CODE GOES HERE
After that, you need to add the following to the iframe code:
class=”resp-iframe”
This goes in the iframe embed, as such:
class=”resp-iframe” width=”560″ height=”315″ src=”https://www.youtube.com/embed/IKa8KZGl9HY” title=”YouTube video player” frameborder=”0″ allow=”accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture” allowfullscreen>
and finally, the last item it to add the following style after the container div:
.resp-container {
position: relative;
overflow: hidden;
padding-top: 56.25%;
}
.resp-iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
Your final before and after should look like the following:
Before
After
.resp-container {
position: relative;
overflow: hidden;
padding-top: 56.25%;
}
.resp-iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}