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! 👍
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.