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.

Development info

  • Stylesheet location: /source-v6/styles/components/_media.scss
  • Embedding instructions for YouTube:
    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 a div class="alignx size-percent-x" around the iframe – same structure as captions
    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
  • In WordPress:
    • All you need to do is paste the video’s URL in the editor (this embeds a full-width video)
    • To get a smaller, aligned video, you need to use the instructions above.

Styling

Videos can be 100%, 50% or 25% width (using the same sizing and alignment classes as photographs), and can have captions (descriptive text below the embedded video) if desired. 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.

Full-width example

Resized and aligned example

Videos can have a caption

Just like images, you can align videos to the right (usually), 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.