Video Carousel

Video Carousel

Using a Video Carousel is a cool way to display multiple videos in a single iframe, rather than just embedding videos in a list. Thanks to John Lowe at Baylor!

This is a multi-step process and a little more complicated than some of the other tips, as it does require a basic knowledge of .html to create the correct files.

Follow this two-step process:

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
    

Links to an external site." width="100%" height="300"></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"

 

 

<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="$IMS-CC-FILEBASE$/vimeo01.html?canvas_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>
 

 

Example

Vimeo #1 Vimeo #2 Vimeo #3