Video link not working in Video Carousel

[rmeyer3]

I have tried every which way to get this to work, and can not for the life of me figure it out. I have switched the video files around and still get the same result. I am creating a video carousel for my Canvas presentation at our Districts technology training in August. I have created one before with no issues, but now when I use the same steps and have the coding exactly the same, the first video will not show up.

This is the coding that I am using:
<p><iframe style="display: block; margin-left: auto; margin-right: auto;" width="600" height="450" name="box"></iframe></p>
<p style="text-align: center;">Technology of the classroom</p>
<p style="text-align: center;"><a class="Button Button--success" href="https://community.canvaslms.com/courses/37265/files/517939/download/?download=1" target="box">Future Ed</a>
<a class="Button Button--primary" href="https://community.canvaslms.com/courses/32765/files/517881/download/?download=1" target="box">Classroom</a>
<a class="Button Button--warning" href="https://community.canvaslms.com/courses/32765/files/517880/download/?download=1" target="box">Canvas LMS</a>

If I take the move the file numbers around, each of the videos will work except which ever is on the first "button". When I click the first button it tells me in the iframe, "Page Not Found". I am trying to get this remedied before I leave next week as I wont be returning till two days before the presentation.

[Stef_retired]

 @rmeyer3 ‌, I don't have an immediate answer for you, but I wanted to let you know that I've shared your question with the Instructional Designers‌ group to attract the attention of your fellow experts.

[kmeeusen]

Hi  @rmeyer3 

This is the code snippet for a video carousel with some instructions provided by  @G_Petruzella ‌ in this community a couple years ago. I have it working just fine in our CanvasHacks Demo Course. I hope this is helpful.

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:

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/77046793Links to an external site." 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, (Links to an external site.)Links to an external site. 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>

Kelley

[rmeyer3 · Accepted solution]

Thank you! This is the code Ive been using, but for some reason it wasn't working. I ended up having to add another "/" before files in the first target and it works fine now.

[sholmes370]

@kmeeusen 

I'm trying to do something similar, only rather than videos, I want to swap .pdf documents into a named iframe element. Following this solution, I can get this to work if I store the .pdf files in my Google Drive, then get a link from the sharing dialogue on Drive. Can I do this directly with .pdf files stored in the Canvas Course files instead? I tried creating a .html file with this content:

<iframe src="https://poway.instructure.com/courses/120296/files?preview=28026646" width="100%" height="480"></iframe>

However, I get an error message saying "poway.instructure.com refused to connect."

Must the link in the .html file always be to an external source? (Putting in a link directly to the .pdf stored in the course files, I cannot get the file to display in the iframe. It just replaces the entire page despite having the link target set to my iframe's name.)