Video Carousel: code-snippet

Document created by G.Petruzella@mcla.edu Champion on May 13, 2015Last modified by G.Petruzella@mcla.edu Champion on Jun 28, 2017
Version 2Show Document
  • View in full screen mode

[Credit to John Lowe, who first shared this solution to a question posed by Steve B.]

 

Use case: I want to give students a series of related videos, and would like to keep them on the same Page/etc. yet not build a table of video frames or links which could take up Page space.

 

This process creates a single <iframe> on a Page/etc., within which each of the videos will play when the link is selected. (The process would also work, more broadly, to display any resource with a URI, not just videos as in this case.) The key is having the <a>s reference an internal Canvas link (the *.html docs), which allows the use of the named target attribute (if the <a> references an external URL, target always = _blank).

 

Two-step process:

[Updated: Watch my Video Carousel: Walkthrough to see the process below in action!]

1. Create, and upload into your course Files, an *.html file for each video, with content as here:

<iframe src="https://player.vimeo.com/video/77046793" width="100%" height="400"></iframe>

2. Create your Page with a single iframe at the top, and links to those *.html files beneath, as below.

  • Important! Make sure the hrefs all use ?download=1
  • Important! Make sure the initial <iframe> is named, and that the hrefs use target="whatever_iframe_name_you've_chosen"

<p><iframe style="display: block; margin-left: auto; margin-right: auto;" width="400" height="300" name="box"></iframe></p>

<p style="text-align: center;">single iframe in the space above</p>

<a class="Button Button--secondary" href="/courses/1572734/files/68152407/download/?download=1" target="box">Vimeo #1</a>

<a class="Button Button--primary" href="/courses/1572734//files/68152406/download/?download=1" target="box">Vimeo #2</a>

<a class="Button Button--warning" href="/courses/1572734//files/68152405/download/?download=1" target="box">Vimeo #3</a>

 

vimeo-iframe.png

2 people found this helpful

Attachments

    Outcomes