Web services

Video

Example (not showing up below, will fix soon)

Full-width

50% width, aligned right

Just like images, you can align videos to the right using an info callout, and the text will flow around them.

If the text is longer than the video is tall, it will wrap beneath the video and stretch the full width of the screen.

About this component

Video creation

Do you need a video for your website, or already have a video you’d like to put online? See the video components page for instructions.

Like photography, videos liven up your page and are a great way to show off your students, staff, or facility. We can embed single videos or playlists, but videos must be hosted on the official PCC YouTube channel and be fully captioned before we can put them on the website.

Styling

Videos can be 100% or 50% the width of the page. You can embed individual videos or playlists.

Responsive behavior for Video

The container around the video shrinks and expands with the screen size, and resizes the video iframe inside accordingly. The video’s ratio stays intact.

How to use for Video

All you need to do is paste the video’s URL in the editor (this embeds a full-width video). WordPress won’t embed videos that aren’t on the official PCC YouTube channel.

To get a smaller, right-aligned video, you need to paste the URL into a 50% width info callout.

Note: If you’re embedding a video from Kaltura, use the Kaltura shortcode.

Development info for Video

Stylesheet location: /_source/styles/components/_video.scss

  • Make sure the video is on the official PCC YouTube channel and is fully captioned (with real captions, not automatically generated ones) before embedding it.
  • In most cases, just pasting the video into the editor will embed it.
  • JavaScript wraps the video in <div class="youtube-container"> to make it responsive – don’t add it manually.

If you need to embed it in HTML:

  1. Grab the video from YouTube using the “Share > Embed” option.
  2. Include <div class="alignx size-percent-x"> around the <iframe>.
  3. Delete the width and height that come in the <iframe>.
  4. Delete the https from the YouTube URL (it will start with //).
  5. Add a title attribute to the iframe with the name of the video plus the word “video” – this is for accessibility.
Example of Video
Full-width

50% width, aligned right

Just like images, you can align videos to the right using an info callout, and the text will flow around them.

If the text is longer than the video is tall, it will wrap beneath the video and stretch the full width of the screen.