Dev Notes

Software Development Resources by David Egan.

Embed Google Slides in Jekyll


Jekyll
David Egan

To embed a Google Slides presentation in a Jekyll post or page, open the presentation and select “Publish to Web” from the “File” menu.

Choose the options you require, then select the “Embed” tab. You’ll be provided with an embed code for an iframe, that you simply paste into your Jekyll post or page. Generate your site as usual, and the iframe with your presentation will be embedded. When Jekyll parses markdown files, it will render any HTML that it finds.

It won’t be responsive out of the box, so you’ll need a bit of CSS. I’ve shown this inline, but you could add the CSS to your stylesheet.

<style>
.responsive-wrap iframe{ max-width: 100%;}
</style>
<div class="responsive-wrap">
<!-- this is the embed code provided by Google -->
  <iframe src="https://docs.google.com/presentation/d/1F0DQTNPg3YG_By6LMGcgwT3icJ3eMhCiupAZm76CIfE/embed?start=false&loop=false&delayms=3000" frameborder="0" width="960" height="569" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>
<!-- Google embed ends -->
</div>

Working Example


comments powered by Disqus