trouble embedding iframe

Hello,

This is a two-part question:

1) I have a public mindmap template that I'd like to embed as an iframe to maintain its interactivity on Rise. But for some reason it's not recognizing it as a valid code. Am I doing something wrong by choosing the "Embed" function? Here's the iframe code:

<iframe width="600" height="400" frameborder="0" src="https://www.mindmeister.com/maps/public_map_shell/937387671/brainstorming?width=600&height=400&z=auto" scrolling="no" style="overflow: hidden; margin-bottom: 5px;">Your browser is not able to display frames. Please visit <a href="https://www.mindmeister.com/937387671/brainstorming" target="_blank">Brainstorming</a> on MindMeister.</iframe><div class="mb-5"><a href="https://www.mindmeister.com/937387671/brainstorming" target="_blank">Brainstorming</a> by <a href="https://www.mindmeister.com/users/channel/25887585" target="_blank">Andrew Ratner</a></div>

2) Is it actually possible to maintain interactivity of web content on Rise, or will they always be published as just an external link?

 

Thanks so much!

 

43 Replies
Alyssa Gomez

Hey Andrew! Thanks for sharing your iFrame code. You almost had it--all you need to add is </iframe> at the end of the code.

I embedded it in a sample Rise course so you can see how it looks! As you can see, you can interact with the content on the MindMeister website by scrolling up or down and left or right.

In case you're interested, here are a few guidelines you'll want to follow when using embed codes in Rise.

Andrew Ratner

Thanks so much for this! Notice when you're interacting with the mindmap that there's a button with an up-arrow in a box? If you hover, it says "Maximize." That gets you to the direct url at mindmeister, where you as a public user can actually manipulate the content inside the mindmap. That's the thing that I want to be able to do, though I'm not sure if that's possible. Thanks for sticking with this!

Andrew Ratner

Ok! So I think I understand here: I noticed that under the "Share Settings," you added me, and that gave me the ability to interact with the mindmap. Does this mean that, if I wanted my learners to interact with the mindmap, I would also have to share the mindmap with them? I can see that that would be OK on an LMS for a specific course/class to share, but I'm doing corporate training, so I wouldn't know or have access to those email addresses to share. I wonder how I'd be able to swing that...

Is this a MindMeister question?

Alyssa Gomez

Hi Andrew,

Haha I thought you added me! I didn't do anything to the settings in MindMeister, so that's likely a question for them. You may also try opening https://www.mindmeister.com/937387671 in an incognito window to test how it will behave for users who are not logged in.

 

Hey Christian, 

I was able to forego the embed code and use this link in a Web Object. Have a look at this sample file I put together for you. Something to keep in mind:

  • If you're going to host the project on a secure site, use HTTPS at the beginning of the Web Object URL. 
  • If you're going to host the project on a unsecure site, use HTTP at the beginning of the Web Object URL. 

Check out this link for more info on that!

Alyssa Gomez

Hi Christian,

Where are you hosting the published output? If you're testing the content locally, you may be encountering security and browser restrictions. Instead, try uploading it to Tempshare or any other web server to ensure that you can view the content as expected.

If you have already hosted the published output on a web server and you're still not seeing the Web Object, try switching the Web Object URL to HTTP to HTTPS (or vice versa). 

Chris  Rosso

Hello,

I am having a similar issue with a Lunda.com embed link. I get an error each time I paste. I've tried with and without the DIV at the bottom and changing the variables - thoughts?

<iframe width='560' height='315' src='https://www.lynda.com/player/embed/500485?fs=3&w=560&h=315&ps=paused&utm_medium=referral&utm_source=embed+video&utm_campaign=ldc-website&utm_content=vid-500485' mozallowfullscreen='true' webkitallowfullscreen='true' allowfullscreen='true' frameborder='0'></iframe><div style="margin-bottom:10px"><strong><a href="https://www.lynda.com/Business-Skills-tutorials/Critical-Thinking/424116-2.html" title="Learn the basics of critical thinking, an essential skill for problem solving and decision making.">Critical Thinking</a></strong> by <a href="https://www.lynda.com/author/2690881">Mike Figliuolo</a></div>

Donald Kerns

I think the main problems with the original post for this thread (3 months ago) and Chris Rosso's recent post above (earlier today) occur because: 

  1. Both have a lot of non-iframe code included after the closing"</iframe>" and Rise does not consider it valid in the Embed pre-built lesson (at least in my experience);
  2. Rise also does not like ANY text/HTML between the opening <iframe> and closing </iframe>. For example, the following embed code is invalid when used with Rise: 

    <iframe src="http://www.articulate.com">You cannot put any text between the iframe tags!</iframe>

    Some tools that generate embed code will add HTML and text between these tags, e.g., to try to handle browsers that don't support iframe. However, in this case, the tool being helpful actually causes Rise to reject your embed code...
  3. Rise also expects straight DOUBLE QUOTES throughout the iframe code, not single quotes - it will reject it simply because of the single quotes. Also, watch out for programs (e.g., Microsoft Word) that automatically replace straight double quotes (e.g., those that you get in Notepad) with curved double quotes - the curved double quotes will cause problems too. 
  4. Watch for a missing </iframe> - I have seen several online tools that purportedly generate iframe code for users, but then they fail to provide the closing tag (I guess they assume the user will add it)...Rise will reject the embed code if the closing </iframe> is missing.
  5. Unfortunately, Rise doesn't tell you or offer any help on what is wrong with your iframe code or URL...you just end up using trial and error to figure out what works and what does not work. 

 

Using Chris Rosso's code posted above, I changed it in two steps so it would work in Rise:

Step 1. Remove all non-iframe code (see bold/italic text below)

<iframe width='560' height='315' src='https://www.lynda.com/player/embed/500485?fs=3&w=560&h=315&ps=paused&utm_medium=referral&utm_source=embed+video&utm_campaign=ldc-website&utm_content=vid-500485' mozallowfullscreen='true' webkitallowfullscreen='true' allowfullscreen='true' frameborder='0'></iframe><div style="margin-bottom:10px"><strong><a href="https://www.lynda.com/Business-Skills-tutorials/Critical-Thinking/424116-2.html" title="Learn the basics of critical thinking, an essential skill for problem solving and decision making.">Critical Thinking</a></strong> by <a href="https://www.lynda.com/author/2690881">Mike Figliuolo</a></div>

Step 2. Change single quotes to double quotes.

ORIGINAL IFRAME-ONLY CODE WITH SINGLE QUOTES DOES NOT WORK IN RISE!!

<iframe width='560' height='315' src='https://www.lynda.com/player/embed/500485?fs=3&w=560&h=315' mozallowfullscreen='true' webkitallowfullscreen='true' allowfullscreen='true' frameborder='0'></iframe>

EDITED IFRAME-ONLY CODE WITH DOUBLE QUOTES WORKS IN RISE!!

<iframe width="560" height="315" src="https://www.lynda.com/player/embed/500485?fs=3&w=560&h=315" mozallowfullscreen="true" webkitallowfullscreen="true" allowfullscreen="true" frameborder="0"></iframe>

One final comment - with the Lynda video above you could also just use the video's URL ( https://www.lynda.com/Business-Skills-tutorials/importance-critical-thinking/424116/500485-4.html ) rather than edited iframe code to embed the video in Rise (turning on/off metadata depending on your needs).

Hope that helps clarify some of the "gotchas" I have seen with Rise's embed/URL prebuilt lesson.

Chris  Rosso

Super helpful! I didn't know about the double quotes. I figured my <DIV> could be an issue, but got the eror with and without. That is just straight Lynda.com embed code so I thought it would be safe even moved the </ifeame> to the end which should work, but to no avail. Really it is just looking for the <iframe> tag.

 

Thanks!

Andrew Ratner

Hey Nancy! When you put in a link into the embed content block, you'll have what you put in your image appear. What is it that you'd like to do? If you want to embed a video from the web, you'd need an embed code (usually in the form of an iframe code that will look like this: <iframe src="xxx.html"></iframe> or some variation). Hopefully this helps. If you need anything else, feel free to respond!