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 add 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.Chirs,
while I can hide the bottom bar by adding &rm=minimal at the end of the embed URL, I would like to keep only the arrow keys that help us navigate between slides, everything else should be hidden. Can this be done ?
Thank you
Chandra
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:
This didn’t work for me. By default the embed code google provides has size attributes in it, such as ‘width=”700″ height=”440″‘. It just stays this size even after adding your solution. I also tried changing the values to ‘auto’ and removing the attributes altogether (and it gets very small when I do either)
It should work fine with the size attributes. Did you wrap the entire iFrame with the div (with the css class) and add the required styles to make it responsive?
Hi Chris
Really, really helpful – thanks!
I’ve tried to make a couple of changes to limit the initial width of the Google slides presentation, but (undoubtedly!) I’ve got something wrong. What now happens is that the presentation is responsive, with a max width of 600px as I need, but on a window wider than 600px the text below the presentation is pushed way down the page (until the window is narrowed down to about 600px wide – below that width, the text behaves itself!). There’s something obvious here that I’m missing but I seem to have a blank spot – maybe it’s the lockdown!
Here’s my CSS – any ideas gratefully received!
Thanks
Richard in the UK
Thank you very much! It works like a charm.
Glad it was useful for you!
Chris,
Sorry, I am new to coding. Can you help me. I am trying to embed scaling Google Slides into Moodle. My problem, i didn’t close the code correctly see: https://ibb.co/b39jjv6
My process:
1) I got the the embed code from Google Slides.
2) I went to HTML code modify in Moodle.
3) I used your code:
4) i pasted the second codes:
.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%;
}
You need to wrap your inline CSS in
<style>tags. See this page for more information: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/styleHi Chris, like Joseph, I would also like to scale embedded Google Sides on Moodle. Unfortunately, I don’t have access to the header. Is there any way to wrap all the style attributes in div tags in HTML?
Thanks in advance,
Marcus
Sorry don’t know much about Moodle. CSS should be inserted between the
tags or in an external CSS stylesheet.Wow! Thank you for your quick feedback. I’m sorry, I don’t know how to add inline CSS into my Moodle HTML page. I don’t know where to put the element. I think i did it correctly. For anyone else who is a newbie check out my code:
https://www.w3schools.com/code/tryit.asp?filename=GEBJH12XZDHP
Chris, i think i did this correctly? Thank you!
I have try this but not working in my moodle. My Google slides still not responsive.
Thank you Chris for sharing this work-around with Google Slides. It was exactly what I needed this morning to fix five GSlides presentations on our school’s website. I also used the <div> and CSS to correct the same issue we had with embedded Youtubes that were not being “responsive.” First time visitor on you site and will now become a regular. Thanks again.
Thanks! Worked well.
Hi Chris this is great. Wondering how to tweak the code so that there is no black 1-2px line at the bottom/right-hand side of the frame. I can play around with width and height, but I can’t ever seem to get it perfect. I am using “rm=minimal” to hide the control bar, using a standard 16:9 slide size.
The padding-top property of the .google-slides-container CSS class will change the proportions of the embed. Feel free to modify & tweak it.
Brilliant. Thank you so much for this post. Now got my video resizing beautifully.
Bruh!! This is awesome. Just what I needed!
Thank you so much for this code..Work perfect
Thank u
Made a BIG difference!
Thanks
Very useful, thanks a lot for sharing this! I don’t understand why it’s not a built-in feature of WordPress, they have many built-in embed formats already, but not Google Slides…
I just have one small issue that I’d like to fix.
When I use the arrows on the Google Slides viewer to navigate through the slides, on a wide window, the view goes back to the top of the viewer (instead of keeping the window on the same view). But when I reduce the width of the window, it doesn’t happen, the browser doesn’t move, everything’s fine.
I tried on Chome and Edge, same result.
I have this problem both on my site where I embedded a Google Slides (this page), and on your demo here on this page.
Any idea how to fix this?
I work with Canvas and I would like to use Google Slides to make a home page. I don’t know where to put the CSS code. When I use Canvas’ Rich Content Editor it will use the html embed code, but it removed CSS. Is there an html inline solution? Or does anyone know where to put CSS code for a Canvas page?
I’m not familiar with that platform, I suggest contacting the developers of Canvas. Regarding an inline solution, you could use this CSS Inliner Tool to generate the HTML markup with inlined CSS. Don’t forget to wrap the CSS in
.
This seems soooper awesome and I think I got part of it to work, but it’s wayyyy above my head. At least, the 2nd part is. Do you have a video tutorial somewhere? I’m just not sure where/how to do the CSS classes. Essentially when I enter everything in, the way I think it should be, the slide pops up and then the code for the classes is below – as is. So I must be doing something wrong.
You are awesome!
I suggest googling (or searching youtube) “add custom css“, substitute the with whatever platform your site is using (ie: add custom css wordpress).
Good luck!
Hi Chris,
I have a quick question. I’m using google slides on my web homepage (not published ATM). I was able to remove the pause/play tool bar at the bottom by using “&rm=minimal”, but I STILL end up with a stubborn thin black border around my google slide which I can’t seem to get rid of. I’d like a clean edge instead. Do you know what I can do about this?
I don’t think you can remove the border from the Google Slides embed itself (the iFrame).
Having the same issue, a thin black border on the bottom and rigth-side
Grrrrr! I cannot get it to go responsive! It works in Dreamweaver test, but not when I upload. I tried another site and yours that are similar coding and nothing works. https://www.mycorneronline.com/index.html Any ideas?
Hola, uso moodle como profesor. No tengo acceso al servidos ni a los CSS. ¿No hay forma de lograr un comportamiento responsive de un iframe con una hoja de calculo de google directamente desde el html de la etiqueta? ¿Como con las imagenes o videos? Tampoco puedo lograrlo con un mindomo inserto, no escala.
Gracias