cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
lnorris1
Community Member

Hide navigation in embedded google slides

Jump to solution

I have created an interactive google slide show for a professional learning course for our teachers and have embedded it on a page in Canvas. The idea is to "lead your own learning" by clicking on parts of the slide that will advance you to a particular point in the slideshow to learn more. I do not want users to navigate the slideshow on their own, but instead by following the prompts on the slides. I have tried different coding in the html but cannot seem to get it right. I did end up hiding the navigation controls at one point, but the slideshow ended up too small. Here is the hyperlink to the google slideshow: Student-Centered Learning - Google Slides Here is the embed code: <iframe src="https://docs.google.com/presentation/d/e/2PACX-1vS5fbVqoYFuZTaE5TKcDyL5Se8vVNNHZPtE5vu6LyJhM1NKs7dbj..." frameborder="0" width="960" height="569" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>

I'm not sure which one you may need. Any help would be greatly appreciated! Thank you! Laurie

3 Solutions

Accepted Solutions
jschaffer
Community Champion

 @lnorris1 ‌,

Much like the others here, I am not expert on HTML, however, I know when I embed Google Sheets, the following works for me:

<iframe src="SOME SHAREABLE SPREADSHEET LINK;rm=minimal" width="SOMETHING" height="SOMETHING"></iframe></p>

The operative piece is the "rm=minimal".  This will hide the menu on the sheet and only show the cells/contents.  Maybe you can work with this and see if you get the results you need.  Good luck. 

View solution in original post

AE2
Community Member

This was very helpful and worked great! I had to modify the width and height a littleafter adding this code. But that's OK because now my slide does not have the Google Slides task bar at the bottom and students can use the interactive links embedded in the slide. Thanks! 

View solution in original post

0 Kudos
KSchneiderQuest
Community Member

Add this to your code after selecting the < > at bottom of edit screen: &amp;rm=minimal

 

Example:

<p><iframe src="https://docs.google.com/presentation/d/e/0k9XJnj-EQrXhu5ejZegU2nN_5gy-G5nDfkfgnlI7SDAEtJnKiubc LiWao2DU8xKnR0kUs91/embed?start=false&amp;loop=false&amp;delayms=3000&amp;rm=minimal" width="960" height="569" allowfullscreen="allowfullscreen" webkitallowfullscreen="webkitallowfullscreen" mozallowfullscreen="mozallowfullscreen"></iframe></p>

View solution in original post

14 Replies
ericwerth
Community Coach
Community Coach

Hi  @lnorris1 .  I know very little about HTML, but a while back was trying to do something similar and found a segment of code that seemed to work.  I included your Google Slides link, and ended up with the snippet below.  What I noticed in my own sandbox course is that the navigation bar isn't visible and you can navigate using the screen links, but the back or forward buttons appear cut off a bit.  I played around with the dimensions but couldn't figure out how to keep the navigation bar hidden but show the complete buttons.  Maybe you can, or perhaps in the slide presentation itself it would be possible to move those navigation buttons up.

I'm not sure if this helps much but I thought I would pass it along in hopes it gets you closer to what you are looking to accomplish!

<div style="margin: 0 auto; width: 99%; height: 525px; overflow: hidden;"><iframe src="https://docs.google.com/presentation/d/e/2PACX-1vS5fbVqoYFuZTaE5TKcDyL5Se8vVNNHZPtE5vu6LyJhM1NKs7dbj..." width="960" height="569"></iframe></div>

Thanks, Eric. I appreciate your help. This didn't work for me. The navigation bar still appears at the bottom when I tried it. I'll keep tweaking the code and see if I can get it right. I would love for this to be an option that Google supports - there may be many instances when you don't want the user to navigate the slide show on their own. Thanks again!

That's a bummer  @lnorris1 .  Below is what I see on my page, so that is strange.  I'm sure that there is  a good reason for this.  Maybe someone will have a great thought that helps us both.

271100_pastedImage_1.png

If you figure something out, please let me know!

jschaffer
Community Champion

 @lnorris1 ‌,

Much like the others here, I am not expert on HTML, however, I know when I embed Google Sheets, the following works for me:

<iframe src="SOME SHAREABLE SPREADSHEET LINK;rm=minimal" width="SOMETHING" height="SOMETHING"></iframe></p>

The operative piece is the "rm=minimal".  This will hide the menu on the sheet and only show the cells/contents.  Maybe you can work with this and see if you get the results you need.  Good luck. 

View solution in original post

Beautiful!! This worked perfectly. I can see the opportunities begin to soar for interactive learning! Thank you Jason!

Hi Eric; 

I came a-searching for an answer to this very problem. Your suggestion was the first one I hit upon and it worked like a dream! I had to wiggle a little with the height px number, but otherwise it was spot-on. Thanks so much! I was a little crushed when I embedded my slideshow only to see that the navigation buttons I'd so painstakingly put into my slideshow were going to be easily ignored because the Google Slide nav bar was there but thanks to your help I'm #winning again!

Cheers!

Excellent samsustenable!  I'm glad that it worked for you!  I wish there was a toggle switch in Slides that you could use to automatically remove their navigation bar, but until then at least there are work-arounds.  I hope the class goes well!

rswengel
Community Contributor

I have tried this as well. It changes nothing in the display. If I move the rm=minimal to another logical location, the slides don't show at all.

AE2
Community Member

After reading your solution to try to remove the taskbar for my interactive Google slide at the bottom by inserting rm=minimal in my code that I am embedding, my page that I have this in comes up with a Google error message. Here is my code:

<p><iframe src="https://docs.google.com/presentation/d/e/2PACX-1vQZ66-yHAubeR3TNjbL717VjevMgrO7bjBeK8IBGsKs1kJwDexI6..." width="960" height="569" allowfullscreen="allowfullscreen" webkitallowfullscreen="webkitallowfullscreen" mozallowfullscreen="mozallowfullscreen"></iframe></p>

I placed the rm=minimal after the 3000 and before the ". Is this rm=minimal needing to be placed somewhere else in this coding?

AE2