By default, Google Slides won’t look very good when embedded on your responsive site. Fortunately, this issue is very easy to remedy with a bit of HTML & CSS.
The Solution
Just wrap the Google Slides embed code in a <div> with a CSS class of .google-slides-container
<div class="google-slides-container">
[Your Google Slides Embed iFrame Code]
</div>Then finally use these two CSS classes to make your embedded slides scale in proportion with your viewport window.
.google-slides-container{
position: relative;
width: 100%;
padding-top: 60%;
overflow: hidden;
}
.google-slides-container iframe{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}The padding-top property of the .google-slides-container CSS class will change the proportions of the embed. Feel free to modify & tweak it.
Demo
Resize your browser window to see this embedded Google Slides presentation scale to fit your window.
Thank you so much for your help Chris, your article helps me to integrate my google slides inside my WP article. I appreciate a lot ! 🙂
Glad I could help! 👍
I have just achieved this too! 🙂
Great article that is just to the point without waffling on 🙂
Saved my life. Works perfect now in my blogger. Highly recommended for people who want to include sliders in their homepage blog. Extra information for blogger newbies:
[Your Google Slides Embed iFrame Code]
goes into the html/java gadget with the google slider embedded code. Copy and paste the second section into the css section of blogger. Your google slides will be perfect for blogger mobile view. Thank you so much Chris Yee !!!
Thanks!!
Works for moodle too 😀
This was such a helpful snippet of CSS! Thanks so much
Hi, really nice! Just a question… is there an option to hide the google slides bar at the bottom? The idea is we will insert a video and we want to hide any other control options. Thanks!
Yup, you can hide the bottom bar by adding
&rm=minimalat the end of the embed URL.Great. Thanks a lot for giving a wonderful solution for a chronic problem. Your code did wonder. This makes the difference between creator and copier( myself)
Thanks once again.
Hi Chris,
If we have to set it as the responsiveness with vertical view format, how do we do it?
example can be seen here.
https://thestrim.com/2020/03/17/example-post/
I’ve tried
.google-slides-container{
position: relative;
height: 100%;
padding-top: 60%;
overflow: hidden;
}
.google-slides-container iframe{
position: absolute;
top: 0;
left: 0;
height: 100%;
}
And didn’t work…
If you need the embed to be in a different aspect ratio (ie: vertical)…the padding-top property of the .google-slides-container CSS class will change the proportions of the embed. Feel free to modify & tweak it.
This saved my life! (not literally, but still)
Did anyone figure out how to add share buttons?
Google Slides embed doesn’t currently have share buttons natively built-in but you could accomplish this by: