Web services

Video

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

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.

Development info
  • Stylesheet location: /_source/styles/components/_video.scss
  • In WordPress:
    • 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.
  • In HTML:
    1. 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.
    2. Grab the video from YouTube using the “Share > Embed” option.
    3. Include <div class="alignx size-percent-x"> around the <iframe>.
    4. Delete the width and height that come in the <iframe>.
    5. Delete the https from the YouTube URL (it will start with //).
    6. Add a title attribute to the iframe with the name of the video plus the word “video” – this is for accessibility.
    7. JavaScript wraps the video in <div class="youtube-container"> to make it responsive – don’t add it manually.

Full-width video example

50% width, aligned video example

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.