Documentation – Embedding YouTube Videos

Documentation home

Follow these steps to embed a video, already on YouTube, into an Alumni webpage.

Prepare the page in which you wish to embed the video

  1. Create the page, if necessary.
  2. On the page enter any text that you wish to describe the video.

Locate the movie on YouTube

  1. Visit YouTube
  2. Search for the movie you want to feature on the website. (e.g., search for “Impact Blues Terry Smutylo”) by entering this in the search bar near the top
  3. Click on the video image or title
  4. Below the video, click on YouTube share button. You will see:

    YouTube share window

  5. Click on YouTube embed button. You will see:

    YouTube embed window

  6. Click on YouTube copy button. The HTML will be highlighted in blue, and copied to your clipboard.

Embed the video in the prepared page

  • Make sure that you are in YouTube embed button mode.
  • You can either embed it in a “paragraph” on the page, as follows:
    • Paste the contents of the clipboard at the place in the text where you want to video to reside.
    • If you want the video centered horizontally, insert <div style="text-align: center;"> before <iframe and
      insert </div> after </iframe>
  • or you can float the video to the right of the descriptive text on the page, as follows:
    • Place the cursor at the front of the line beside which you want the video to start (including to the left of any HTML, such as <p> or <li>).
    • Paste the contents of the clipboard at the place in the text where you want to video to reside.
    • Insert <div class="float-video: center;"> before <iframe and
      insert </div> after </iframe>

Creating a block with several videos

If you wish to have several videos grouped together within a page, proceed as follows:

  1. Start the block of videos with this code: <div class="video-block">
  2. For each video:
    1. Start a block for the video with this code: <div class="video">
    2. Start a text section for the video title with this code: <span>
    3. Insert a small heading (it must fit in one or two lines within the box)
    4. End the text section with this code: </span>
    5. Insert the code as described above (Embed the video in the prepared page)
    6. Change the width value in the inserted code from 500 to 300
    7. Change the height value in the inserted code from 500 to 168
    8. Close the video with this code: </div>
    9. repeat from step “a” for each video
  3. Close the video block with this code: </div>