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
- Create the page, if necessary.
- On the page enter any text that you wish to describe the video.
Locate the movie on YouTube
- Visit YouTube
- 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
- Click on the video image or title
- Below the video, click on
. You will see:
- Click on
. You will see:
- Click on
. 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
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:
- Start the block of videos with this code: <div class="video-block">
- For each video:
- Start a block for the video with this code: <div class="video">
- Start a text section for the video title with this code: <span>
- Insert a small heading (it must fit in one or two lines within the box)
- End the text section with this code: </span>
- Insert the code as described above (Embed the video in the prepared page)
- Change the width value in the inserted code from 500 to 300
- Change the height value in the inserted code from 500 to 168
- Close the video with this code: </div>
- repeat from step “a” for each video
- Close the video block with this code: </div>