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.
- Stylesheet location:
- Embedding instructions for YouTube:
- 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
- Grab the video from YouTube using the Share > Embed option
- Include a
div class="alignx size-percent-x"around the
iframe– same structure as captions
- Delete the width and height that come in the
- Delete the
httpsfrom the YouTube URL (it will start with
- Add a
titleattribute to the iframe with the name of the video plus the word “video” – this is for accessibility
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.
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.
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.
Resized and aligned example
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.