How to Embed Media in Moodle Moodle 2.2
Useful Tips from NWC Academic Technologies
Moodle gives the ability to embed fully functioning videos and other media content that is stored elsewhere on the internet, but plays through a Moodle web page. The advantage of embedding over linking is that students stay within Moodle and interact with the media right on the course page. Moodle uses “object/embed” and “iframe” codes to embed media from sources such as YouTube, VoiceThread, Vimeo, TED, blogs, or anywhere “sharing” is allowed.
Embedding a YouTube Video 1.
First, go to the video you want to copy. you need to copy the embed code from the YouTube video. Click on Share from the video you want to copy. Click Embed. Next, make the choices you want for suggested videos and privacy. Choose the size of the playback window. Make these choices first to allow the code to change before copying it. The embed code will be displayed with <iframe tags>. Highlight the code and click Edit, Copy (Ctrl+C).
2.
Back on your Moodle course page, turn editing on and click Add a resource > Page to begin a page for new content.
3. Copy the embed code (Ctrl+C)
4.
In the Text Editor, click on the HTML tool. This brings up the HTML Source Editor.
Paste (Ctrl+V) the text into the secondary textbox. Click Update. The video may or may not be viewable in the Text Editor until you Save changes.
5.
Add other text as needed and then save changes at the bottom of the page.
6.
7.
The video now plays through an embedded video player directly within Moodle.
Northwestern College Academic Technologies
Click HTML button
1
Rev. 093012
How to Embed Media in Moodle Moodle 2.2
Useful Tips from NWC Academic Technologies
Moodle gives the ability to embed fully functioning videos and other media content that is stored elsewhere on the internet, but plays through a Moodle web page. The advantage of embedding over linking is that students stay within Moodle and interact with the media right on the course page. Moodle uses “object/embed” and “iframe” codes to embed media from sources such as YouTube, VoiceThread, Vimeo, TED, blogs, or anywhere “sharing” is allowed.
Embedding a VoiceThread
1.
Log into http://nwc.voicethread.com and go to My Voice. Click on the VoiceThread you want to share or embed. Then, click menu in the top-left corner. Similarly, you can click menu from the VT Options on the My Voice page.
OR
2. Next, click inside the embed code. This copies the <object/embed> code to the clipboard.
Back on your Moodle course page, turn editing on and click Add a resource > Page to begin a page for new content. 3.
In the Text Editor, click on the HTML tool. This brings up the HTML Source Editor.
4.
5.
Paste (Ctrl+V) the text into the secondary textbox. Click Update. The video may or may not be viewable in the Text Editor until you Save changes. You can change the size of the player simply by changing the width and height in the code (ex. make it 640 X 480) Make sure you Save changes.
Click HTML button
6.
Plays VT inside Moodle
If the VoiceThread is set to Private, it won’t play. Change the Playback Options in VoiceThread and copy the embed code again.
Northwestern College Academic Technologies
2
Rev. 093012
How to Embed Media in Moodle Moodle 2.2
Useful Tips from NWC Academic Technologies
Moodle gives the ability to embed fully functioning videos and other media content that is stored elsewhere on the internet, but plays through a Moodle web page. The advantage of embedding over linking is that students stay within Moodle and interact with the media right on the course page. Moodle uses “object/embed” and “iframe” codes to embed media from sources such as YouTube, VoiceThread, Vimeo, TED, blogs, or anywhere “sharing” is allowed.
Embedding From Other Sources Embedding media into Moodle can take on many forms. The two most common have been shown, YouTube and VoiceThread.
Other sources may allow embedded media as well, and the process previously described will work for Vimeo videos and TED videos.
1.
In general, embedding media into a webpage like Moodle simply requires linking (pointing) to source material (SRC) which when clicked on, calls up an application or plug-in on the local computer.
For instance, if you know where on the
2.
internet an audio file resides, like an .mp3 file or .wav file, you can embed it on Moodle. To embed a midi file for the 1812 Overture, the HTML code would be:
3.
<EMBED SRC=".../graphics/ sounds/1812over.mid" HEIGHT=60 WIDTH=144>
4.
where “…/graphics/sounds/” is the internet location for the file. If the computer has QuickTime plug-in installed, the audio file will play.
Click HTML button
This first stage of the process will vary for the source of the content. The Moodle piece is still the same as it was previously: Create a new Page, switch to HTML view, paste the embed SRC code, and save changes. With these basic principles, you should be equipped for integrating rich media in your Moodle CourseSites.
Northwestern College Academic Technologies
3
Rev. 093012