Some of you are making Google Sites for programs and are embedding Google Slides slideshows within these sites. One thing to keep in mind is patrons who access these sites on mobile devices or tablets. By default, when you embed a Google Slides slideshow on a webpage, it will not automatically adjust itself for optimal viewing on smaller screens. Items on webpages that automatically adjust themselves based on screen size are called responsive, so here is some information on making your slideshow responsive:
https://www.labnol.org/embed-google-slides-200615#make-the-google-slides-player-responsive
The basic idea as outlined in Mr. Agarwal's blog is to wrap the embedded iframe link inside an HTML div element. So to do this in Google Sites, when you choose the embed option, choose the embed code option and paste something like the following:
<style>
.responsive-google-slides {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
.responsive-google-slides iframe {
border: 0;
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}
</style><div class="responsive-google-slides">
<iframe src="https://docs.google.com/presentation/d/e/xxxx"></iframe>
</div>
Substituting the iframe link generated by your Google Slides slideshow for the link in bold above. Make sure to remove the size information from the iframe as described in the blog post.
If you have any questions or would like any assistance from IT with these type of projects, please submit a ticket.
-Nicholas
The one caveat with this embed code is that it leaves the slide navigation bar at the bottom. Is there a line that can be added to this code to remove it?
ReplyDeleteYou can right click on each slide you don't want them using the navigation bar to get to and select "Skip Slide". That forces viewers to navigate with the touch screen. That navigation bar is still there but it won't take them anywhere. I'm trying it out on mine interactive site and it seems to work.
ReplyDelete