Embedding YouTube videos

Have a great video you'd like to showcase on your website? These instructions can help.

Some popular YouTube channels include:

Generating embed code

  1. Navigate to the YouTube video you wish to embed.
  2. Click the Share link below the video.
  3. Click Embed.
  4. Click Show More
  5. You will see the HTML code for embedding the video along with other options.
  6. You'll need to make a Custom size for the video. Click the Video size dropdown and choose Custom Size. For a full-width video on a UVic web page, type 542 for width and hit tab (the height will auto-complete).
  7. Deselect the Show suggested videos... checkbox.
  8. Leave Player controls and video title and play actions check boxes ticked.
Embed YouTube video

Adding the embed code to your website

  1. Now click in the code box which starts with <iframe width=….>
  2. Copy the embed code and paste it into your site using the HTML view. (In Cascade, you'll click the HTML icon in the content editor to get there.)Embed YouTube video
  3. For videos on UVic websites, add <figure> before the embed code and </figure> after the embed code. This will put a border around your video. To add a caption, use <figcaption> (see advanced instructions below for an example).
  4. Click Update to close HTML view.
  5. Untick the Tidy HTML button, located above the submit button.
  6. Submit and publish your page. (You may want to publish to your test site first to make sure everything is working and formatted properly.)

Advanced instructions

If you're comfortable with HTML and embedding videos, you can use this code sample to quickly embed a properly formatted video on your UVic website. Note that you need to change the italicized part of the URL and you can customize the caption:

<figure>
<iframe width="542" src="https://www.youtube.com/embed/QFFk8vk61h0?rel=0" height="304" frameborder="0"></iframe>
<figcaption>View all <a href="https://www.youtube.com/facesofuvicresearch" class="youtube">Faces of UVic Research videos</a>.</figcaption>
</figure>

Need some additional help?

Drop by a free Cascade open house, where you can get hands-on help from experts.