HTML Editor: Inserting Pictures or Internet Video

One advantage of a web page is that it is easy to add images or internet video to it. Move your cursor to the spot on your page where you wish to add the item and follow the steps below.

Inserting Local Pictures with HTML
To add an image to your web page click on the "Insert Image" button. This will take you to the Insert Image window. In the File Browser section you can select a local image from within the Moodle site for your webpage. If the image is not on the Moodle site yet you can upload it from your own source (see the tutorial on Uploading files). Clicking on the link to the image will preview the image on the right and fill out the "Image URL" at the top. Make sure to fill in the "Alternative (Alt) Text", which is what will show if the browser does not have images displayed. Border thickness and Spacing can be changed manually, and are measured in pixels.

Inserting Images from Flickr (or any other web picture source)
The process is the same as above, except that you must paste the URL of the picture in the "Image URL" section. Note that there may be copyright restrictions on online images.

Inserting Video from YouTube (or any other web video source)
This video uses YouTube as an example, but there are many other online video sites, including TeacherTube, which is a video site exclusively for uploading education-based videos.

When you find an internet video you want to use go to the video's page and find the section called "Embed". There will be a long list of HTML code here. Highlight and copy this code and return to your Moodle page. Click on the "Toggle HTML Source" button and paste the embed code into your document. Do not change the code. Click the toggle button again. The video will not be visible to you in the HTML editor until the page refreshes.