How to disable Google Slides presentation IFrame navigation - html

Question

I'm working on a website and am using a presentation as a slideshow for concert images because it is easy and familiar for someone who is not programmatic proficient to edit what is shown during the slideshow. To hide the navigation i used CSS, and placed the IFrame in a div with the class .googleSlideshow.
The HTML:
<div class="googleSlideshow">
<iframe src="https://docs.google.com/presentation/d/bL4rGh0Nk/embed?start=true&loop=true&delayms=5000" frameborder="0" width="450" height="550" allowfullscreen="false" mozallowfullscreen="false" webkitallowfullscreen="false"></iframe>
</div>
The CSS:
.googleSlideshow{
width:100%;
height:550px;
overflow:hidden;
}
.googleSlideshow iframe{
width:450px! important;
height:calc(100% + 29px);
}
easy enough! here comes the problem: when the IFrame is clicked, the presentation goes to the next slide and pauses! This is terrible, and since this is in an IFrame the components of the IFrame are not able to be effected by my CSS, or script. Is there an attribute I can add to the IFrame that will get passed down to the presentation and stop the image onclick navigation?

Answer 1

Adding rm=minimal
<iframe src="https://docs.google.com/presentation/d/bL4rGh0Nk/embed?start=true&loop=true&delayms=5000&rm=minimal" frameborder="0" width="450" height="550" allowfullscreen="false" mozallowfullscreen="false" webkitallowfullscreen="false"></iframe>

Answer 2

I have found a fix thanks to trial and error!
the HTML
<div class="googleSlideshow">
<iframe src="https://docs.google.com/presentation/d/bL4rGh0Nk/embed?start=true&loop=true&delayms=5000" frameborder="0" width="450" height="550" allowfullscreen="false" mozallowfullscreen="false" webkitallowfullscreen="false"></iframe>
<div style="top:0px;left:0px;width:100%;height:579px;position:relative;margin-top:-583px;" onclick="return false;">
</div>
</div>
the CSS
.googleSlideshow{
width:100%;
height:550px;
overflow:hidden;
position:relative;
}
.googleSlideshow iframe{
width:450px! important;
height:calc(100% + 29px);
}
the idea of a div blocking the click is what worked, but putting it after the iframe and then moving it to cover the iframe was better than placing the div before the iframe. i hope this helps others in a similar situation!