Rise iFrame: removing grey border; reducing interior padding of frame
Jun 19, 2017
I am working on embedding some storyline2 content into a Rise course using an iframe withing the embed option. I'm able to do so and have gotten my course content to load fine.
Within the attached image, you'll see two areas called out i'm looking for possible solutions on.
1) Is there a way to remove the border around the embedded iframe? This grey bar is within the attached image using a red box. I've tried adding the following options minus the parentheses with no luck.(frameborder="0")
(frameBorder="0")
(seamless="seamless").
2) I can't seem to figure out how to remove the white spacing around the embedded .story file. This space is identified within the attached image using s long squiggly line. Is that are able to be removed?
Background info: I want to use very narrow storyline files, maybe 100 pixels tall, but Rise seems to be adding several inches of space to the top and bottom when I do. So what might act as a custom graphical divider or other custom interactive element, will now "float" in the course between those spaces.
Here is the embed iframe code I am using if you want to play with it.
<iframe src="https://s3-us-west-2.amazonaws.com/mfrm-learning-development/Course+Files/CoryTest/story.html"></iframe>
33 Replies
This post was removed by the author
Hi there Cory,
The thin gray border and interior padding you see in the Embed block is there by design, but a feature that would allow you to toggle it on and off isn't a bad idea! I'll definitely pass that on to the product team for you.
We always appreciate hearing what folks want to see in future Rise releases, so thanks for the feedback!
Thanks Alyssa!
As we begin to embed Storyline (or other) content into our Rise courses, there will be times when I don't want that content to appear to be in its own section. Also, when I create something with a small height, Rise leave BIG gaps between content due to the iframe spacing.
Thank you for passing it along to the team!
Thanks, Cory. These details really help us to get a better idea of how folks are using the Embed block!
This padding could really start causing content creators some grief when designing for mobile first.
It's not a big thing to fix, surely? If content creators want padding, we can add it ourselves? But with the current set up, we are stuck with it.
That makes a lot of sense, Ruth, and I really appreciate you sharing your perspective with us. I'll definitely pass it along to my team. Thanks for being a part of this community!
Hi Alyssa,
Do you have an update on this? It's causing us a lot of grief when using Rise and it's affecting our clients negatively who are trying to run courses on mobile.
Thanks,
Erica
Hi Erica,
No update on this yet, but I'd love if you could share another example so that I could pass that along to my team? Seeing real world examples and how this impacts your design will really help us understand the need and importance of this change.
If you wanted to drop the Share link in here, that would be enough for us to look at!
Hi,
Is there any update on this yet?
I'm trying to get my storyline slide to blend with the Rise page, with the grey border it doesn't look great.
Thanks
Jen
Hi Jen,
Thanks for checking in on this! Our team is finalizing some of the updates to Storyline that'll allow you to have a more seamless look when you're using a Storyline block in Rise.
We'll let you know here as soon as that is ready and you can apply it to your courses.
That’s fantastic!
Thank you.
Jen,
Just an FYI - Replying via email will include your signature. You can edit out your contact information from your post if you'd like!
Oops!
Thank you! :D
Hi,
Is this likely to be a fix in the near future?
Thanks
Hi Ashley Terwilliger - is this process close to launch? We want our iframe to look blended in the page as opposed to being an old-fashioned looking block. Appreciate any updates on this, thanks!
Hi Joe and Craig,
The modern player for Storyline 360 is now available (read more about it here). If you use the Modern player, look to set Menus & Controls to Off and choose the Light player theme, then you shouldn't see a border in Rise.
Here's a quick, one slide example I did in Storyline with those settings. The image below the puppy is just a regular Rise image block.
Thanks Ashley Terwilliger! Thats amazing, so helpful and looks so much better! :)
That's great to hear, Craig! Thanks for letting us know!
Ashely, I love the new modern player. I attempted to use your directions above to remove the iframe border - and it kind of worked. : )
I still see a light colored line above and below my recreated flash card element that I recreated in storyline. Any thoughts on why this is showing?
Here is a working example of the issue: https://rise.articulate.com/share/4_dy6BhPC5AEP7YFNUZQ9-Ht5r_XyLNU
Hey Cory,
Thanks for including that example. We're seeing the same thing you're seeing--so sorry for the trouble! Our team is working through this issue, and we'll keep you posted as we know more.
In the meantime, do you see an improvement if you change the width to Medium or Full Width? You can make that change by clicking Edit >> Settings in the Storyline block.
Thanks for the response Alyssa. The lines are still visible after changing the width setting within the embed. I also tried included and oversized rectangle on the base layer, which extended well beyond the slide edge - just to make sure the surface area was 100% covered.
I'm sorry those workarounds didn't pan out, Cory. I'll keep you posted as we move forward on this bug. Thanks again for letting us know it's affecting your work!
Hi Alyssa,
Chiming in to say I'm experiencing similar issues to the ones Cory Craig and Jen describe upthread. Any word on progress and updates? It's particularly noticeable when the storyline block is full color and I use a HEX color for the block background, but honestly, it's equally obnoxious to have such a large amount of white space between the text block and the storyline block.
I'm using Storyline 360 and Rise.
Help? :)
Hey everybody. I'm excited to let you know that we just released update 29 for Storyline 360! Here are all the details.
One of the fixes addresses an issue where a white border was showing around Storyline blocks that had a custom background color in Rise 360.
Here’s how you can update Storyline 360. After updating Storyline, please republish your Storyline interaction for Review 360 and insert the new version into Rise 360. Let me know how you make out!