~ Embed and manipulate third party content such as such as YouTube, Slideshare and Scribd into Moodle ~ <iframe> ~ Multimedia plug ins.

1. Learner Management Systems
Photo Credit: http://www.flickr.com/photos/25691430@N04/4347819911/
CC: http://creativecommons.org/licenses/by-sa/2.0/

2. Programme
• Embed and manipulate third party content such as such
as YouTube, Slideshare and Scribd into Moodle
• <iframe>
• Multimedia plug ins.

3. Presenter
Michael Gwyther
mick@yumstudio.com.au
@mickgwyther

4. What is embedding?

5. Where can I embed?
Photo Credit: http://www.flickr.com/photos/7149027@N07/6066027411
CC: http://creativecommons.org/licenses/by-nd/2.0/

6. What content do you have?
What digital content do you
have now?
What might you need to
develop?

7. Multimedia sources
http://compfight.com
http://openclipart.org/

8. Multimedia sources
http://findicons.com/
http://skalgubbar.se/

9. Multimedia sources
•
•
•
•
•
•
http://www.freesound.org/
http://opsound.org/
http://librivox.org/
http://www.opensourcemusic.com/
http://ccmixter.org/
http://www.flashkit.com/loops/

10. Multimedia sources
http://www.slideshare.net/
http://skalgubbar.se/

11. Site Permissions
Settings > Site administration > Security > Site
Policies
http://docs.moodle.org/24/en/Site_policies#Allow_EMBED_and_OBJECT_tags

12. Resource Repositories
http://docs.moodle.org/22/en/Repositories

13. Resource Repositories - YouTube
http://docs.moodle.org/22/en/Repositories

14. Resource Repositories - YouTube
<p><a href="http://www.youtube.com/v/EZ15vUjgqvw">P3
Professionals Change Drivers Bronze Age Orientation Day</a></p>
http://docs.moodle.org/22/en/Repositories

15. Resource
Repositories
http://docs.moodle.org/22/en/Repositories
Settings > Site
administration > Plugins >
Repositories > Manage
Repositories

16. Multimedia Embedding
Photo Credit: http://www.flickr.com/photos/25622716@N02/8471963889
http://creativecommons.org/licenses/by-nc/2.0/

17. Filters
• Finds a link in text that points to a
multimedia resource and replaces the link
with an appropriate multimedia player code
which can play the resource.
Photo Credit: http://www.flickr.com/photos/25622716@N02/8471963889
http://creativecommons.org/licenses/by-nc/2.0/

18. Filter settings
Settings > Site administration > Plugins > Filters >
Manage Filters

19. Filter settings
Settings > Site administration > Appearance >
Media embedding

20. Multimedia Plug ins
Supported Media Formats
* .mp3 - MPEG Audio Stream, Layer III
* .swf - Macromedia Flash Format File (Adobe, Inc.)
* .mov - QuickTime Video Clip (Apple Computer, Inc.)
* .wmv - Windows Media File (Microsoft)
* .mpg - MPEG Animation
* .avi - Audio Video Interleave File
* .flv - Flash Video File (Macromedia, Inc.)
* .ram - RealMedia Metafile (RealNetworks, Inc.)
* .rpm - RealMedia Player Plug-in (RealNetworks)
* .rm - RealMedia Streaming Media (Real Networks, Inc.)
* .mp4
* .m4v
http://docs.moodle.org/24/en/Multimedia_plugins_filter

21. iFrame tag
•
•
•
•
•
Open any Moodle tinyMCE editor
Switch to HTML view
Type in iFrame embed code:
<iframe src="http:/www.yumstudio.com.au">
</iframe>
Add length & width:
<iframe height="600" width="900"
src="http:/www.yumstudio.com.au">
</iframe>
Use all real estate (width)
<iframe height="600" width=”100%"
src="http:/www.yumstudio.com.au">
</iframe>
Photo Credit: http://www.flickr.com/photos/92033577@N00/4508020659
http://creativecommons.org/licenses/by-nc/2.0/

22. iFrame tag – alternative text
•
In the event the user’s browser doesn’t support
frames, add some alterative text between the
opening and closing tages:
•
Use all real estate (width)
<iframe height="600" width=”100%"
src="http:/www.yumstudio.com.au">
Place alternative text for browsers that do not
understand Iframes in here</iframe>
http://docs.moodle.org/23/en/Iframe
http://www.w3schools.com/tags/tag_iframe.asp
Photo Credit: http://www.flickr.com/photos/92033577@N00/4508020659
http://creativecommons.org/licenses/by-nc/2.0/

23. iFrame tag – examples
Vimeo
YouTube
Slideshare
SoundCloud
Photo Credit: http://www.flickr.com/photos/92033577@N00/4508020659
http://creativecommons.org/licenses/by-nc/2.0/

24. iFrame tag – examples
Photo Credit: http://www.flickr.com/photos/92033577@N00/4508020659
http://creativecommons.org/licenses/by-nc/2.0/

25. Photo Credit: http://www.flickr.com/photos/33037761@N07/5077808426/
http://creativecommons.org/licenses/by-nc/2.0/

26. Object example
Photo Credit: http://www.flickr.com/photos/31191642@N05/4031388571/
http://creativecommons.org/licenses/by-nc/2.0/

27. Object example
YouTube (old embed Code)
Photo Credit: http://www.flickr.com/photos/31191642@N05/4031388571/
http://creativecommons.org/licenses/by-nc/2.0/

28. Object example
YouTube (old embed Code)
Photo Credit: http://www.flickr.com/photos/31191642@N05/4031388571/
http://creativecommons.org/licenses/by-nc/2.0/

29. Thank you
Michael Gwyther
mick@yumstudio.com.au
@mickgwyther