Use the following code to embed a responsive Google Slides presentation in your blogs. You can also use the same code for other iframes to make it responsive in your Blogger blog posts.
<style>
.responsive {
position: relative;
padding-bottom: 56.25%;
padding-top: 35px;
height: 0;
overflow: hidden;
}
.responsive iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
<div class="responsive" style="text-align: center;">
<iframe allowfullscreen="true" frameborder="0" height="569" mozallowfullscreen="true" src="https://docs.google.com/presentation/d/19XXhOg8h5x-4bW1tCmp5NZLaGOA_0JpiqF0OZZE0Iok/embed?start=false&loop=false&delayms=3000" webkitallowfullscreen="true" width="960"></iframe>
</div>
HTML and CSS
<style>
.responsive {
position: relative;
padding-bottom: 56.25%;
padding-top: 35px;
height: 0;
overflow: hidden;
}
.responsive iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
<div class="responsive" style="text-align: center;">
<iframe allowfullscreen="true" frameborder="0" height="569" mozallowfullscreen="true" src="https://docs.google.com/presentation/d/19XXhOg8h5x-4bW1tCmp5NZLaGOA_0JpiqF0OZZE0Iok/embed?start=false&loop=false&delayms=3000" webkitallowfullscreen="true" width="960"></iframe>
</div>
See the Pen Responsive Google Presentation by Avadhoot Dandekar (@AvadhootDandekar) on CodePen.
Google Slides is a presentation program and part of the free, web-based Google Docs suite offered by Google. Google Slides is available as a web application, mobile app for; Android, iOS, and as a desktop application on Google’s ChromeOS. The app is compatible with Microsoft PowerPoint file formats.
Fork me on GitHub
Post a Comment