trouble embedding iframe

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.

Alyssa, thanks so much! Have you embedded interactive content into Rise before? I notice that it is no longer interactive when it's embedded, but it is when you go into the website. Is there a way to maintain the interactivity?

Thanks!

Hey Andrew,

I stumbled across your post when I was trying to do the same thing - I initially had the iframe error, corrected it and now it will not run on articulate storyline. Not sure if anyone really has a solution for this...

Hi Andrew! Take a Peek at this quick video I recorded of my testing, and let me know if you're seeing something different on your end. 

Hey, Christian! Could you share the embed code here? I'll take a look and test it out in a Storyline file. What version of Storyline are you using?

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!

That works in every website that I have built but seems to not work within
the articulate storyline 360. Would love some help with this!

Christian

Hey Andrew, now I get what you mean! Check out this new sample Rise course I put together. I think this is exactly what you're looking for. Here's the embed code I used:

<iframe src="https://www.mindmeister.com/937387671"></iframe>

Hi again Christian, did you mean to include an embed code here?

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?

Hey Alyssa, not sure why it didn't go through the first time. Here it is:

<iframe width="560" height="315" src="http://stanfordmsk.claripacs.com/a.php?a=87&mode=simple" frameborder="0" allowfullscreen></iframe>

Thanks!

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!

I totally can. That's so funny! So it looks like you just embedded the actual link itself into the iframe instead of the source link they provide, and that makes all the difference! That's interesting. 

Hi,

I did try to use as a web object and while it seems to work in the storyline
program, when exported it stops working. Could you see if it works in the
final verison?

Christian

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). 

Just wanted to follow up and say thanks! Thank you!

You're welcome, Andrew! Glad I could help. 😁

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>

Hi Chris, 

Can you tell me what elements from this page you want embedded in your Rise course? Do you want only the video, or do you also want the other content, such as Related Courses, About this video, and so on?

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.

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!

RISE new learner here - when I try to insert a link or video in my project - I get this text.  How can I edit/remove?  Thanks!

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!

I was hoping to just have the link appear, instead of the image it produced.

[New Ribbon EE Signature]

Usually when you embed a link like that, something weird like that pops up (it's happened to me, too). One thing you could do is insert a link in regular text, like a header or subheader. That way it'll still be recognizeable as a link.

Thank you!!!

[New Ribbon EE Signature]