Responsive Google Slides

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">
	<iframe src="https://docs.google.com/presentation/d/e/2PACX-1vTrBtRboJG6TPXv3M4pMq0ss2I1Bc3vo5spqFRSATKrx40bFSjd9d-HPv7Bz5751CDlhO5NZsWqDRzk/embed?start=false&loop=false&delayms=3000" width="960" height="569" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
</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.