GitHub icon LinkedIn icon
Code Snippets•Web Development

Responsive Google Slides

Chris

• 1 min read

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

👉 Heads up! There’s a easier & more modern solution using only CSS here.

View Updated 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.

Comments

  1. 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 ! 🙂

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

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

      1. Chris,
        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

  6. 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.

  7. 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…

    1. 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.

  8. This saved my life! (not literally, but still)
    Did anyone figure out how to add share buttons?

  9. 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)

    1. 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?

  10. 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

    .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%;
    max-width: 600px;
    max-height: 380px;
}

  12. 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:

    [pasted my Google Slides Embed iFrame 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%;
    }

      1. Hi 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

        1. Sorry don’t know much about Moodle. CSS should be inserted between the tags or in an external CSS stylesheet.

  14. 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.

  16. 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.

    1. The padding-top property of the .google-slides-container CSS class will change the proportions of the embed. Feel free to modify & tweak it.

  17. Brilliant. Thank you so much for this post. Now got my video resizing beautifully.

  22. 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?

  23. 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?

    1. 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

      .

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

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

  25. 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?

Comments are closed.