Video Carousel: code-snippet

[G_Petruzella]

[Credit to  @John_Lowe , who first shared this solution to a question posed by  @stevebudd .]

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

This video is currently being processed. Please try again in a few minutes.

‌ 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="https://community.canvaslms.com/courses/1572734/files/68152407/download/?download=1" target="box">Vimeo #1</a>

<a class="Button Button--primary" href="https://community.canvaslms.com/courses/1572734//files/68152406/download/?download=1" target="box">Vimeo #2</a>

<a class="Button Button--warning" href="https://community.canvaslms.com/courses/1572734//files/68152405/download/?download=1" target="box">Vimeo #3</a>

[John_Lowe]

Thanks for writing this up with your great visual example! 

[kmeeusen]

Gerol:

Thank you!

This is very useful, and I am going to add it to my HTML Canvas course for my faculty.

Awesome trick!

[kmeeusen]

Not being a coder, this process took a bit of tweeking to get it to work. I found that I had much greater success if I uploaded the embed code for the videos into my Files content area.

Working now and nifty, peachy keeno!

One last question; is there a way to get the main iframe (the one named "box" to display as a frame to the end user like it does in your example above?

[mouldera]

I am having trouble with the code. Am I missing something here? I am not a coder, and I am finding this difficult to figure out what is wrong.

Here is what I have for my code:

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

<p><a class="Button Button--secondary" href="https://slcc.instructure.com/courses/390730//files/60898064/download/?download=1" target="box">Video 1</a>

<a class="Button Button--primary" href="https://slcc.instructure.com/courses/390730//files/60898065/download/?download=1" target="box">Video 2</a>

<a class="Button Button--warning" href="https://slcc.instructure.com/courses/390730//files/60898067/download/?download=1" target="box">Video 3</a></p>

None of the videos work. Here is the code for each video with in their own HTML page and uploaded to the Files area:

<iframe src="https://www.youtube.com/watch?v=HQt6jIKNwgU" width="100%" height="300"></iframe>

Can anyone can figure out what I am doing wrong?

I have figured it out and got it working. Now, has anyone figured out how to preload the first videos, so there is not a blank area? Students think the carousel is not working when in fact it is.

[dianepbh]

Annette, 

I have be fussing around with this for a bit and cannot figure out why my carousel has a "page not found" for each video"  or I got just the html code in the carousel!! I know the video itself works because I test them individuall. So, am curious what you figure out. ARGH  

[G_Petruzella]

Hi  @dianepbh  -

Glad to help! Thanks for sending one of your *.html files, and the screenshots, to look at. The first thing I notice is that your *.html document has a whole lot in it. 😄 The content of the document (what's between the <body> tags) should only be 1 single line:

<iframe src="https://youtube.com/yourvideo" width="100%" height="400"></iframe>

Instead, your *.html document has

<p class="p1"><span class="s1"><i>&lt;iframe src="</i></span>https://youtube.com/yourvideo</p>

<p class="p2"><span class="s2"><i>" width="100%" height="400"&gt;&lt;/iframe&gt;</i></span></p>

With regard to the "File Not Found" issue, I can't directly troubleshoot without the ability to verify the actual in-course URI references... 🙂 But what I would do is: navigate to Files and just confirm that, in fact, the URI of the file video3-redonev1.html is, in fact, https://pps.instructure.com/courses/123/files/12345 (for example), and that this is the URI which you're using as your href in the button. The Canvas code scrubbing should be OK and not what's the root cause of the behavior - I think the important bit is probably confirming the URIs of the various *.html files. That would be my own workflow to troubleshoot this, anyway! Good luck, and let me know how it goes.

Best,

--

Gerol

[weaver_852]

HI Gerol --

I have successfully saved the html file in my course and when I add in the code I am able to see the buttons for the videos but no iframe? I think I may be having trouble with the naming? Still new to html, any help would be appreciated!

[G_Petruzella]

Hi  @weaver_852 ‌ - Glad to help! If you want to shoot me a copy of your code (both of the Page and of the individual *.html files you've created), I'd be happy to take a look.

[weaver_852]

Thanks!

This is the *html file I used for my first Youtube video and then I have three others just like it:

<iframe src="Human Populations - Introduction (1 of 4) - YouTube " width="100%" height="400"></iframe>

This is what I entered into the page but I am having trouble associating the files with the code I think? Also not sure how to add space for my 4th file.

<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>
<p><a class="Button Button--secondary" href="https://osu.instructure.com/courses/21752/files/4069036/download" target="box" data-api-endpoint="https://osu.instructure.com/api/v1/courses/21752/files/4069036" data-api-returntype="File">Video 1</a> <a class="Button Button--primary" href="https://osu.instructure.com/courses/1572734//files/68152406/download/?download=1" target="box">Video 2</a> <a class="Button Button--warning" href="https://osu.instructure.com/courses/1572734//files/68152405/download/?download=1" target="box">Video 3</a></p>

[G_Petruzella]

Thanks  @weaver_852 ! Here are some comments I hope are useful to you:

1. So maybe it's just an artifact of how links appear in the Canvas Community, but it looks like your src="" value in the iframe is text, rather than the YouTube URL:

<iframe src="Human Populations - Introduction (1 of 4) - YouTube " width="100%" height="400"></iframe>

versus

<iframe src="https://youtu.be/WamxI7BwzmA" width="100%" height="400"></iframe>

2. Your Page iframe code looks right (it's got name="box" and the target="" values below are "box" too).

3. For the 1st button, I do notice that your href="" value (the html file URL) ends in /download, rather than in /download/?download=1 . I believe you need to change that. Also, I notice that the URL is pointing at a totally different Canvas course than the other URLs (21752 vs 1572734): this is likely to be an issue!

4. To add an additional button for an additional video, add another <a> immediately after your 3rd one, as follows:

<a class="Button Button--warning" href="https://osu.instructure.com/courses/1572734//files/XXXXXXXX/download/?download=1" target="box">Video 4</a>

5. Let me know if any of this helps! If you make the changes and still have issues, I'd next ask: what behavior do you see when you click the buttons? Do you see an empty frame? Some kind of content in the frame? No frame at all?

[weaver_852]

I will keep working with it for a bit longer, but it does not seem to want to work for me.

The buttons just lead to "page not found" screens within Canvas when I click on them, but nothing until then. 

This is the text I am working with now.. The URLs are the actual course numbers that I will find in my course settings correct? And the number after the files if what I will retrieve from the files themselves? And I do not know why when I save the code the first line automatically becomes so much longer.

<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>
<p><a class="Button Button--secondary" href="https://osu.instructure.com/courses/1322542/files/4069455/download/?download=1" target="box" data-api-endpoint="https://osu.instructure.com/api/v1/courses/1322542/files/4069455" data-api-returntype="File">Video 1</a> <a class="Button Button--primary" href="https://osu.instructure.com/courses/1322542//files/4069549/download/?download=1" target="box">Video 2</a></p>

[G_Petruzella]

Boo! 😞 Sorry it's not working yet.

The URLs follow the pattern: the digits after /courses/ indicate the unique Canvas course ID, and the digits after /files/ indicate the specific file ID within the course.

The extra code that auto-appears adds some additional parameters to each of your <a>s. As far as I know (thought anybody more knowledgeable can correct me!), the data-api-endpoint values shouldn't affect the behavior, so long as the href is OK.

Without the privileges to get into your Canvas instance and look myself, I guess I'd recommend you bring this to your friendly local academic technology team member at OSU. Good luck!

[dianepbh]

I am getting the exact same results and I cannot get it to work.

D

[dianepbh]

Gerol,

Canvas seems to be stripping out the /?download=1

D

[G_Petruzella]

 @weaver_852 ‌,  @dianepbh ‌ -

I'm including below a video walk- (and talk-)through of how I create the video carousel - it's under 3 minutes, and hopefully you can see if there's a specific spot in the process where you see me doing something that clarifies what you've been trying.

I hope it helps! The carousel is a neat effect, and it would be great to include in your course design (but only if it can be made to work! 🙂

This video is currently being processed. Please try again in a few minutes.

 

[weaver_852]

 @G_Petruzella ‌ Thanks for the walk through! Like Diane, it seems like Canvas is stripping the download=1 portion of the text and unfortunately I am only able to see my html file as I saved it and not the actual video. Not sure if anyone else is experiencing this issue! 

[G_Petruzella]

 @weaver_852 : One thing I'm just seeing - it may make all the difference. The URL for the YouTube video you shared is the "short" version (i.e. https://youtu.be/whatever). Have you tried using the full embed-formatted URL (i.e. https://www.youtube.com/embed/whatever)?

[weaver_852]

I tried that as well. It works that way, but it still appears the same way and you have to click on the youtube link in the iframe to bring up the video. 😕

[G_Petruzella]

Grrr! I was sure I'd found the magic bullet. 😕

Okay, grasping at straws here, but... I notice in the screenshot you shared, the text of the html document (which is displaying on-screen instead of the video) has a curious thing: the double-quote marks are "curved," that is, formatted so that the open quotes lean left, and the close-quotes lean right. This is odd to my eye, since ordinarily, plain-text documents (like *.txt or *.html) use neutral (or vertical) quotation marks.

I may be betraying my old-school web dev background, but have you tried replacing the curly quotes with neutral quotes? Since they're difference UTF-8 characters, I'm not sure but that they'd affect the coding differently.

[dianepbh]

 @kona ‌

EUREKA!!!! I finally got it to work!!!!!  

Here is what I did: 

• watched the video (thank you Gerol)  several times!!
  • NEW--> I used BRACKETS to make sure I did not have any extraneous code since I had been copy/pasting the code here on the page
  • NEW --> I missed the "COPY THE URL" from the FILE pane. I was grabbing the code from the RCE.
• STILL NO SUCCESS but CLOSER --> I was much closer to getting something with these steps.. but still not getting a video. I no longer saw the html code when I clicked on each video. 
• SO then... --> So, I repeated the steps and instead of the YOUTUBE share URL, I used the entire EMBED CODE instead of the iframe code that Gerol had.
  • THAT IS WHEN I HIT PAY DIRT! 
• THANK YOU GEROL for not giving up on us! Your video was very helpful.. I realized where I was interpreting instructions as opposed to following instructions. AH.. The power of video!
• USER STORY: How I plan on using this is when we have more than one teacher in a course assigned to groups of kids. Now each teacher can have their own videos and kids can watch their teacher's video on one nice neat page.  (My example below is jsut a sample but not the real thing so the course names do not match.. I just grabbed three random videos to get this to work!) 
• (BTW- Now that I know this code works, I won't use brackets any more.. I just did that to make sure my copy paste was not bringing over odd code that I could not see like those curved quotes.)
• 
• 

[G_Petruzella]

 @dianepbh ‌ -

YES!!

I'm psyched that you made it work - there's something incredibly and uniquely satisfying, I think, in persevering. I'm so glad I was able to help you in the process.

And... thank YOU for sharing back your process, and the neat use-case you're building for! It sounds like a fantastic and very useful application for this particular feature.

[dianepbh]

Gerol.. I added a bit more to the code so that kids would realize that something is missing from the page.  

• Added a border (using a table) and the text that encourages kids to CLICK!!
• Centered everything so that the buttons are super close to the videos. 

Result after they click on their teacher's video.  

The coding for the TABLE with the BORDER (4px) and the size of the video follows. I tweaked the size of the iframe so that the border spacing/distance was pretty close to the video itself. 

<table style="border-color: red; margin-left: auto; margin-right: auto;" border="4px">
<tbody>
<tr>
<td><iframe style="display: block; margin-left: auto; margin-right: auto;" width="575" height="325" name="box"></iframe></td>
</tr>
</tbody>
</table>