cancel
Showing results for 
Search instead for 
Did you mean: 
stevebudd
Community Participant

Video links shown in iframe

Jump to solution

Hi there,

I'm trying to make a list of lecture videos as buttons on my page, and when you click one it opens in an iframe above it (in the same page).

Clicking another button will open that video in the same iframe and so on.

My code example:

<a href="https://player.vimeo.com/video/93206523" target="vimeobox">The Illusion of Life</a>

Opens the vimeo in an iframe on my page.

It's working perfectly everywhere else, but canvas seems to delete and override my code and make it into this:

<a class="external" href="https://player.vimeo.com/video/93206523" target="_blank"></a>

It opens the vimeo in an external tab.

I've avoided using any javascript, because I've had very little success with it, but I'm really hoping to stop canvas turning my coding from an internal link to an external link.

I need to retain the "target="vimeobox".

Any thoughts on this would be appreciated.

Cheers,

Steve

5 Solutions

Accepted Solutions
Stefanie
Community Team
Community Team

 @stevebudd  , I experimented with this using two different lines of HMTL:

<p><a href="https://player.vimeo.com/video/93206523" target="_self">The Illusion of Life</a></p>

and

<p><iframe src="https://player.vimeo.com/video/93206523" width="160" height="90"></iframe></p>

This is what that code looks like on the finished page:

embed-video-on-same-page.png

The first link you see above, despite the target="_self" attribute, opens in a new tab or window upon click; I don't believe that Canvas supports the target="_self" attribute. Try as I might, I couldn't code that video so that it played on the same page.

However, the second (iframe) video does open in the same page--but as you can tell by the height and width parameters I set, it plays in a tiny player, so students would then have to click on the icon at the lower right of the video to toggle the video view to full screen.

So: I added the iframes to a 3X3 table, and this is how they display on the page:

embed-video-on-same-page-as-table.png

Last, I decided to add rows to the table to give the videos titles:

embed-video-on-same-page-as-table-with-captions.png

I know this isn't exactly what you're looking for, but would one of these solutions work for you?

View solution in original post

Stefanie
Community Team
Community Team

 @stevebudd ​, for future reference, here's the link to the Canvas HTML Editor Whitelist.

View solution in original post

John_Lowe
Community Champion

This is a trick that our CSM showed us when we started using Canvas.  You can force Canvas to display HTML files uploaded to the Files area by adding "?download=1" to a file link.  So if you are able and willing to create a bunch of HTML files containing the embed code of your video files, then you can upload those into the Files area and call each of those into your iframe.   If you have 10 videos you want to embed, you'll have to create 10 .html files with the embed code for the videos, but at least this will prevent the links from acting like external links.

For example:

<p><iframe src="https://www.baylor.edu" width="100%" height="300" name="iframe_a"></iframe></p>

<p><a href="https://community.canvaslms.com/courses/18045/files/273054/download/?download=1" target="iframe_a">Hello World</a></p>

This first screenshot shows my iframe with the Hello World link below it.

ScreenClip [1].png

This second screenshot shows my iframe after you clicked the Hello World link. 

ScreenClip [3].png

View solution in original post

John_Lowe
Community Champion

Also, in case you need to see what these HTML files with the embed code looks like:

<html>
<body>

<!-- This version of the embed code is no longer supported. Learn more: https://vimeo.com/s/tnm -->
<object width="500" height="198"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="https://vimeo.com/moogaloop.swf?clip_id=93206523&force_embed=vimeo.com&fullscreen=1" /><embed src="https://vimeo.com/moogaloop.swf?clip_id=93206523&force_embed=vimeo.com&fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="500" height="198"></embed></object>

</body>
</html>

As you can see, it is just the standard "old" Vimeo embed code with HTML and BODY tags wrapped around it -- nothing special.  Just create one of these for each of the videos you want to use and then link to these files in your Files area using the method I describe above.

View solution in original post

stevebudd
Community Participant

Thanks guys, @John Lowe this sounds like a great solution- but I'm a little unclear as to whats happening.

I'm putting the html from your original post in my file, but how would it call the vimeo to the iframe if cant include the "?download"?

<This is the iframe  name="iframe_a">

These are the buttons

<a href="how do i call the vimeo1 in here?" target="iframe_a">hello earth</a>

<a href="how do i call the vimeo2 in here?" target="iframe_a">hello mars</a>

It seems to work in terms of its calling two different webpages to the iframe (second one broken) but I'm not sure how your solution would allow me to call a vimeo.

View solution in original post

14 Replies
Stefanie
Community Team
Community Team

 @stevebudd  , I experimented with this using two different lines of HMTL:

<p><a href="https://player.vimeo.com/video/93206523" target="_self">The Illusion of Life</a></p>

and

<p><iframe src="https://player.vimeo.com/video/93206523" width="160" height="90"></iframe></p>

This is what that code looks like on the finished page:

embed-video-on-same-page.png

The first link you see above, despite the target="_self" attribute, opens in a new tab or window upon click; I don't believe that Canvas supports the target="_self" attribute. Try as I might, I couldn't code that video so that it played on the same page.

However, the second (iframe) video does open in the same page--but as you can tell by the height and width parameters I set, it plays in a tiny player, so students would then have to click on the icon at the lower right of the video to toggle the video view to full screen.

So: I added the iframes to a 3X3 table, and this is how they display on the page:

embed-video-on-same-page-as-table.png

Last, I decided to add rows to the table to give the videos titles:

embed-video-on-same-page-as-table-with-captions.png

I know this isn't exactly what you're looking for, but would one of these solutions work for you?

View solution in original post

G_Petruzella
Community Champion

Hi  @stevebudd ​ -

Am I reading your question right, that you want a series of multiple button/links, all of which, when clicked, would target a single (i.e. "shared") iframe sitting at the top of the page?

iframe-shared-screenshot.png

stefaniesanders​ proposed solutions may be the best option I can see, too: as near as I can tell, all external links get treated as though with target="_blank" - I've had no success with setting other target values. Internal Canvas links behave differently; but that doesn't really help in this case. 😞

Stefanie
Community Team
Community Team

 @stevebudd ​, for future reference, here's the link to the Canvas HTML Editor Whitelist.

View solution in original post

John_Lowe
Community Champion

This is a trick that our CSM showed us when we started using Canvas.  You can force Canvas to display HTML files uploaded to the Files area by adding "?download=1" to a file link.  So if you are able and willing to create a bunch of HTML files containing the embed code of your video files, then you can upload those into the Files area and call each of those into your iframe.   If you have 10 videos you want to embed, you'll have to create 10 .html files with the embed code for the videos, but at least this will prevent the links from acting like external links.

For example:

<p><iframe src="https://www.baylor.edu" width="100%" height="300" name="iframe_a"></iframe></p>

<p><a href="https://community.canvaslms.com/courses/18045/files/273054/download/?download=1" target="iframe_a">Hello World</a></p>

This first screenshot shows my iframe with the Hello World link below it.

ScreenClip [1].png

This second screenshot shows my iframe after you clicked the Hello World link. 

ScreenClip [3].png

View solution in original post

John_Lowe
Community Champion

Also, in case you need to see what these HTML files with the embed code looks like:

<html>
<body>

<!-- This version of the embed code is no longer supported. Learn more: https://vimeo.com/s/tnm -->
<object width="500" height="198"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="https://vimeo.com/moogaloop.swf?clip_id=93206523&force_embed=vimeo.com&fullscreen=1" /><embed src="https://vimeo.com/moogaloop.swf?clip_id=93206523&force_embed=vimeo.com&fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="500" height="198"></embed></object>

</body>
</html>

As you can see, it is just the standard "old" Vimeo embed code with HTML and BODY tags wrapped around it -- nothing special.  Just create one of these for each of the videos you want to use and then link to these files in your Files area using the method I describe above.

View solution in original post

 @John_Lowe that's a sweet workaround! I've gotta try it. Monday. 🙂 Thanks!

stevebudd
Community Participant

Thanks guys, @John Lowe this sounds like a great solution- but I'm a little unclear as to whats happening.

I'm putting the html from your original post in my file, but how would it call the vimeo to the iframe if cant include the "?download"?

<This is the iframe  name="iframe_a">

These are the buttons

<a href="how do i call the vimeo1 in here?" target="iframe_a">hello earth</a>

<a href="how do i call the vimeo2 in here?" target="iframe_a">hello mars</a>

It seems to work in terms of its calling two different webpages to the iframe (second one broken) but I'm not sure how your solution would allow me to call a vimeo.

View solution in original post

Hey  @stevebudd ​ -

You may have already worked on this in the meanwhile, but in case not, here's a run-down of how I made it work, using  @John_Lowe ​'s nifty method:

1. I created (and uploaded into the course Files) several *.html docs, each of which just contains an <iframe> to one Vimeo video, as below:

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

2. Then, I created the "front-facing" Page, with the single named <iframe> up top, and the several links to those *.html files underneath, as below:

<p><iframe style="display: block; margin-left: auto; margin-right: auto;" width="400" height="250" 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>

Works like a charm - clicking each link in turn opens each of the several Vimeo videos in the same iframe! The only caveat is the one John Lowe mentioned - you have to do the legwork of creating those *.html documents, one for each of the videos.

vimeo-iframe.png

John_Lowe
Community Champion

Sorry for the delay.  The only thing different about my method and  @G_Petruzella 's method is that he used the Vimeo iframe embed code, and I get really nervous about iframes within iframes like that.  So I used Vimeo's old OBJECT based embed code.  The other advantage of not nesting iframes is that you can control the size parameters a little easier without worrying about how browsers may render nested iframes.

ScreenClip.png