Using the HTML Editor

Inside Moodle’s text editor is an HTML editor. You might edit HTML code to embed a video, Google maps, a poll, or another tool on your course. A wide variety of widgets can be embedded into your course page, blocks, labels, and quizzes. Using the HTML editor requires using the text editor. Be aware that the more content you embed, the longer it will take for the page to load.

Embedding media requires a little bit of copying and pasting HTML code. HTML code might look technical and confusing, but that is okay. You do not need to know any computer coding to embed media. All that is required is copying the code and pasting it into Moodle’s HTML editor.

How do I embed media or other content in labels/blocks/quiz questions?

  1. Navigate to the settings of the course element you would like to embed a media in.
  2. Scroll to the text editor that contains the displayed content. (For blocks, this is the Content box. In the case of quiz questions, this is the Question text box. For labels, this is the Label text box.)
  3. Select the Show more buttons icon in the text editor.
  4. Select the HTML icon.
  5. On a new webpage, navigate to the website with your widget. Copy the embed code. Typically these codes are listed in an “Embed” or “Share” setting. They begin and end with the angle brackets < and >. A few examples are show below.
    • To embed a YouTube video, select the Share button below the video and copy the code listed under Embed.Screenshot of YouTube video with arrow pointing to "Share" icon
      • The iframe code that you copy might look similar to one of the following:
        • <iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/dQw4w9WgXcQ” frameborder=”0″ allowfullscreen></iframe>
        • <iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/uzpUaUIrabc” frameborder=”0″ allowfullscreen></iframe>
        • <iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/nJgi-B461AM” frameborder=”0″ allowfullscreen></iframe>
      • To start at a specific time, add ?start=x (where x is the number of seconds) to the end of the URL. For example, the following iframe codes start at 0:05, 1:15, and 2:45, respectively. The added part is in bold for your convenience.
        • <iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/dQw4w9WgXcQ?start=5” frameborder=”0″ allowfullscreen></iframe>
        • <iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/uzpUaUIrabc?start=75” frameborder=”0″ allowfullscreen></iframe>
        • <iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/nJgi-B461AM?start=165” frameborder=”0″ allowfullscreen></iframe>
    • To embed a Twitter feed, sign in to Twitter. Go to your settings and select Widgets. Select Create new. Choose the type of embedded timeline you would like and start to configure it. Select Create widget and then copy the HTML of your site. For more details, visit the Twitter support page for embedding.
      • The code that you copy might look similar to one of the following:
        • <a class=”twitter-timeline” href=”https://twitter.com/OleMoodle”>Tweets by OleMoodle</a> <script async src=”//platform.twitter.com/widgets.js” charset=”utf-8″></script>
        • <a class=”twitter-timeline” href=”https://twitter.com/StOlaf”>Tweets by St Olaf College</a> <script async src=”//platform.twitter.com/widgets.js” charset=”utf-8″></script>
    • To embed a Google map, search the desired location. On the left menu, select Share. Copy the code under the Embed map tab. This is useful for off-campus research sites or informal class gatherings.Screenshot of Google maps with arrow pointing to "Share" icon on search results menu on left
      • The code that you copy might look similar to the following:
        • <iframe src=”https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d4789.428009425898!2d-93.16409700743023!3d44.45754796359627!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x87f653db7d621c21%3A0x3bed7d288d3b1c99!2sMalt-O-Meal+Co!5e0!3m2!1sen!2sus!4v1470255989705″ width=”600″ height=”450″ frameborder=”0″ style=”border:0″ allowfullscreen></iframe>
  6. Return to the Moodle window and paste the embed code in the box. Even though the code might look scary, technical, and confusing, it will work out okay. You do not need to edit anything inside the code. All you have to do is copy and paste it onto the end of what is already there.
  7. Select the HTML icon again to see a rendering of your embedded media in the text editor. Add additional text as desired.
  8. Scroll down to the bottom of the page and select Save.

How do I link to media?

Sometimes rather than displaying media directly on Moodle with embedding, it may be useful to provide a link for students to click.

  1. Navigate to the course element you would like to add a link to.
  2. Scroll to the text editor.
  3. Type the words that will contain the link.
  4. Highlight the words to link and select the Link button in the text editor.
  5. Copy and paste the web address (URL) of the media into the box.
  6. Select Open in new window.
  7. Select Create link. When clicked, the linked text will open the linked website in a new window. The following is an interactive example of links behaving in this way. (Go ahead, click it!)

Take a listen to this century’s greatest hit.

Now that you know how to embed widgets in Moodle, try customizing the blocks on your course homepage.