Skip to main content

Embedding Viostream Videos in Moodle

Moodle is a widely-used learning management system (LMS) that allows educators to create engaging online courses. Embedding Viostream videos in your Moodle courses enhances the learning experience by providing high-quality video content directly within your course materials.

Quick Setup​

To embed Viostream videos in Moodle, you can use the HTML block or add content directly to course sections. Here's the basic process:

  1. Turn editing on in your Moodle course
  2. Add an activity or resource > Label or use an HTML block
  3. Switch to HTML view in the text editor
  4. Paste your Viostream embed code
  5. Save changes

Moodle Text Editor Configuration​

If you're a Moodle administrator, you may need to configure the text editor to allow iframe embeds. In the TinyMCE editor settings:

// In your Moodle configuration or TinyMCE settings
$CFG->allowobjectembed = true;

// For TinyMCE specifically, ensure iframes are allowed
$CFG->tinymce_allowediframe = 'play.viostream.com';

Embedding Methods​

Method 1: Using Labels​

Labels are perfect for adding video content to course sections:

  1. Turn editing on in your course
  2. Click Add an activity or resource
  3. Select Label from the resources section
  4. In the label text editor, click the HTML button (looks like <>)
  5. Paste your Viostream embed code
  6. Click Update to save

Method 2: Using HTML Blocks​

HTML blocks provide more flexibility for video placement:

  1. Turn editing on in your course
  2. Click Add a block > HTML
  3. Configure the block title (or leave blank)
  4. In the content area, paste your Viostream embed code
  5. Save changes

Method 3: Course Description or Topic Summary​

Add videos directly to course or topic descriptions:

  1. Go to Course administration > Edit settings
  2. In the course summary, click the HTML button
  3. Paste your Viostream embed code
  4. Save and display

Method 4: Using Pages or Books​

For more structured content with videos:

  1. Add a Page or Book activity
  2. In the content editor, click the HTML button
  3. Paste your Viostream embed code alongside other content
  4. Save and return to course

Example Viostream Embed Code​

Your Viostream embed code will look something like this:

<iframe
  src="https://play.viostream.com/embed/abc123xyz"
  width="640"
  height="360"
  referrerPolicy='strict-origin-when-cross-origin'
  frameborder="0"
  allowfullscreen>
</iframe>

Making Embeds Mobile-Friendly​

For responsive video embeds that work well on mobile devices, wrap your iframe in a responsive container:

<div style="position: relative; width: 100%; height: 0; padding-bottom: 56.25%; margin: 1rem 0;">
  <iframe
    src="https://play.viostream.com/embed/abc123xyz"
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
    frameborder="0"
    allowfullscreen>
  </iframe>
</div>

Moodle Theme Considerations​

Different Moodle themes may handle embedded content differently:

Boost Theme (Default)​

  • Works well with responsive embeds
  • Consider using Bootstrap classes for better integration

Classic Theme​

  • May need additional CSS for proper video sizing
  • Test video display across different screen sizes

Custom Themes​

  • Check with your theme developer for optimal embed practices
  • Some themes may have specific video embed components

Administrator Configuration​

Allowing Iframe Embeds​

Moodle administrators need to ensure iframe embeds are permitted:

  1. Go to Site administration > Security > Site policies
  2. Enable Allow EMBED and OBJECT tags
  3. In Plugins > Text editors > TinyMCE HTML editor
  4. Add iframe[src|width|height|frameborder|allowfullscreen] to Extended valid elements

Content Security Policy​

If your Moodle site uses Content Security Policy (CSP), add Viostream to the allowed frame sources:

frame-src 'self' play.viostream.com;

Troubleshooting Common Issues​

Video Not Displaying​

If your Viostream video isn't showing:

  1. Check permissions: Ensure your role can embed HTML content
  2. Verify embed code: Confirm you're using the correct Viostream iframe code
  3. Test in HTML view: Switch to HTML editor and check the code is preserved
  4. Check site policies: Verify iframe embeds are allowed site-wide

Content Being Removed​

If Moodle strips your embed code:

  1. Check text editor settings: Ensure iframes are in extended valid elements
  2. Review user permissions: Some roles may have restricted HTML capabilities
  3. Contact administrator: Site policies may need adjustment

Mobile Display Issues​

If videos don't display properly on mobile:

  1. Use responsive containers: Wrap iframes in responsive divs
  2. Test on different devices: Check various screen sizes
  3. Consider Moodle app: Some embeds may not work in the mobile app

Performance Considerations​

For courses with multiple videos:

  1. Use video thumbnails: Consider linking to videos rather than embedding all
  2. Lazy loading: Some Moodle themes support lazy loading for better performance
  3. Consider bandwidth: Be mindful of students with limited internet connections

Best Practices for Educational Use​

Course Structure​

  • Organise by topics: Group related videos in course sections
  • Provide context: Add descriptions before and after videos
  • Include transcripts: Link to or embed video transcripts for accessibility

Student Engagement​

  • Discussion forums: Create forums for video-related discussions
  • Assignments: Use videos as basis for assignments or reflections
  • Quizzes: Create quizzes based on video content

Accessibility​

  • Captions: Ensure videos have captions for hearing-impaired students
  • Alternative formats: Provide audio descriptions where necessary
  • Keyboard navigation: Test that embedded players work with keyboard-only navigation

Integration with Moodle Activities​

Assignments​

Reference specific videos in assignment briefs:

<p>Watch this video before completing your assignment:</p>
<iframe src="https://play.viostream.com/embed/abc123xyz" width="640" height="360" frameborder="0" allowfullscreen></iframe>

Forums​

Embed videos in forum discussions to illustrate points or provide examples.

Quizzes​

Use videos as stimulus material for quiz questions.

Additional Resources​

If you're experiencing issues with Viostream embeds in Moodle, check that your Moodle administrator has enabled iframe embeds and that your user role has permission to add HTML content to courses.