Follow

Integrating YouTube videos on a page

YouTube (http://www.youtube.com) has a vast library of videos that can be extremely useful in the classroom. However, teachers may be concerned about directly sending a learner to YouTube lest they be distracted by images, links or comments that are not suitable for them and unrelated to the learning.

So a good alternative is to embed or insert the YouTube video into your class page. This allows the video to be streamed from the YouTube site so it doesn't use up space in your Ultranet, plus only the video you require will be visible.

The following guides show you two methods to integrate YouTube videos into your page: embedding videos into the Page Content, and linking to videos in the Resources module.

Embedding a YouTube video

The following steps show you how to embed a YouTube video into a web page within your Ultranet site:

  1. Navigate to YouTube (http://www.youtube.com) and browse for the video you wish to embed.

  2. Once you have found the video required, click on the "Share" button that is shown directly beneath the YouTube video.

    Then, click on the "Embed" button that appears towards the bottom-left of the panel.

  3. The resulting panel will show you the embed code to use in the text area at the top, followed by some embed options and video size settings below it.

    YouTube-EmbedCode.png

    We recommend the disabling the "Show suggested videos when the video finishes" option, as this may link to other videos that may be irrelevant or unsuitable for the learner.

    Once you have made your selections, copy the updated embed code that is shown in the text field at the top.

  4. Sign in to Ultranet and navigate to the page you wish to embed the video in. Once there, bring up the Page Editor (click on Page Tools > Edit Page Content).

  5. Switch to HTML mode by clicking on the view toggle towards the bottom-left.

  6. Paste the embed code copied from Step 3 above into HTML area where you want the video to appear (e.g. at the bottom of the text). You can see what this will look like if you switch back to Design view. Once happy with the result, click "Update Page Content" to save changes.

Linking YouTube videos as Web Objects

The following steps cover inserting a YouTube video into the Resources module, using the "Embed Web Object" feature:

  1. Navigate to YouTube and browse for the video you wish to embed.

  2. Once you have found the video required, click on the "Share" button that is shown directly beneath the YouTube video. Copy the shortened URL that is displayed.

  3. Sign in to Ultranet and navigate to the page you wish to embed the video in. Once there, make sure the Resources modules is active and enabled on the page, then click on it's module "Options" menu and select "Add a Resource".

  4. In the resulting pop-up window, select the third tab to "Embed Web Object". In the URL area for this option, paste in the shortened URL copied earlier in Step 2, then edit and replace the domain section of the URL with "www.youtube.com/v".

    EmbedWebObjectOptions.png

    Finish off by selecting the folder to upload to and adding the title details, then click "Create Resource".

Possible issues with YouTube videos blocking menus

Embedded YouTube videos inherently render at a 'higher' layer than other elements on a web page. On occasion, this may give the appearance of the YouTube video covering or obscuring another web page item that should have layer priority (e.g. the Ultranet WebSpace fly-out menu, or the Page Tools menu).

Here's how you can get around this issue by adding a little snippet to the embed code.

The default embed code from YouTube will look something like this:

<iframe width="640" height="510" src="http://www.youtube.com/embed/XXXXXXXXXXX?rel=0" frameborder="0" allowfullscreen></iframe>

To force the YouTube video to obey page layers and render underneath other page elements, you simply need to append "&wmode=transparent" to the end of the source URL in the embed code.

The resulting code should now look something like this:

<iframe width="640" height="510" src="http://www.youtube.com/embed/XXXXXXXXXXX?rel=0&wmode=transparent" frameborder="0" allowfullscreen></iframe>

Now when you insert the YouTube video using this modified embed code, the Ultranet menus and other layered objects will appear above the video.

Tip: For further ideas on controlling embedded YouTube videos, including setting auto-play and looping, check out this website: http://ebrianrose.com/youtube-embed-tricks-and-hacks/.
Was this article helpful?
2 out of 2 found this helpful
Have more questions? Submit a request

0 Comments

Article is closed for comments.
Powered by Zendesk