Embedding Existing Videos in OLIVE

Transcription

1 Scenario: You have found some good video clips on YouTube and want to use it as part of your lesson. Can you download it and then upload it into OLIVE? Of course NOT! That is breaking the law! Solution: This snippet will show you how to make a YouTube video clip part of your lesson in OLIVE. You can create a simple link, embed the clip within your content page or provide a link that creates a pop-up window to play the video. Creating a link to a YouTube video 1. After finding the desired YouTube clip, click on Share. Learning Academy 1

2 2. Copy the URL generated by YouTube. 3. Go to the desired content page in your OLIVE lesson and click on Web Link from the Build Content tab. 4. Type in the title for this video clip and paste the URL in the box provided. Provide a brief description of what the video is about. Don t underestimate the power of the description. Without a description, students will see only a title and don t know what to expect. Would you feel tempted to explore a page like that if you were the student? If you would rather skip it, then chances are your students will do the same. 5. Leave this as the default and click the Submit button. 2 Learning Academy

3 6. When students click on the title, the YouTube video launches in another window. However, it also includes other video clips shown on the right side. This has the potential to distract students and lead them away from your lesson. To overcome this issue, it would be better to embed the video in your content page. Embedding a YouTube video 7. When you have found the video clip you want in YouTube, click on Embed, followed by Show More. 8. Select the size of the video you want from the list. The sizes are listed in pixels. Do you know how much space you have in your content page in OLIVE to display the video? No? Time for you to learn about screen resolutions. Learning Academy 3

4 9. Select only Show player controls. This allows the user to control the video such as Pause / Play. Uncheck all the other boxes. 10. After setting the parameters, copy the entire iframe code provided. 11. In your OLIVE content page where you want to embedded the video clip, select Item from the Build Content tab. 12. Enter the title and brief description to inform students what they are about to watch. Position your cursor below your description by hitting the Enter key once. 13. Click on the HTML Code View button to open the text editor. This will reveal the description (Text) you had typed earlier, in the HTML format. 4 Learning Academy

5 14. You can now paste the iframe code you had copied between the <p></p> tag. 15. Click on the Update button after pasting the iframe code. 16. Your video will be embedded below your text description. Click the Submit button. Learning Academy 5

6 17. The video clip can now be played by your students within the OLIVE page. Since it is streamed from YouTube, users start watching the video within a few seconds of clicking the play button. This method eliminates other distracting video clips and provides a better user experience. One drawback of using this method is that it may occupy a huge screen space (depending on the video size you had selected). 6 Learning Academy

7 Creating a link to a pop-up YouTube video 18. What does a pop-up video look like? Basically, when a link to the video is clicked, the video clip pop-up in a separate window. Your original page remains on screen. 19. Follow steps 7 9 shown earlier in Embedding a YouTube video to obtain the iframe code. However, this time you do not need the entire code but only from https showinfo=0 as shown below (exclude the double quotes). Learning Academy 7

8 20. Copy the entire HTML code shown in the box below and paste it in Notepad. <p> Copy the iframe code as mentioned in the previous step and replace the 2 highlighted codes shown below (https showinfo=0). You may also want to adjust the size of the video by changing the 2 figures shown (640 & 480). <a href=" onclick="javascript:void window.open(' _Q?rel=0&showinfo=0',' ','width=640,height=480,toolbar=0,menubar =0,location=0,status=0,scrollbars=0,resizable=0,left=80,top=80');return false;">click this link to find out more...</a> </p> 21. Open the HTML code view text editor. Paste the modified codes above to the location shown here. Click the Update button to close this editor. 22. Click the Submit button to close the content page editor. 8 Learning Academy

9 23. The link is now ready for use. When students click on the link, the video clip will appear in a separate window. Learning Academy 9