Add Responsive Google Slides on Hugo

Steps to add Responsive google slides iframe with Hugo:

Hugo version:

$ hugo version

Hugo Static Site Generator v0.69.0-4205844B linux/amd64 BuildDate: 2020-04-10T09:12:34Z

Step 1: Create Shortcode

Create gslides.html file

vim layouts/shortcodes/gslides.html

Step 2: Add below code:

<div id="Container"
 style="padding-bottom:56.25%; position:relative; display:block; width: 100%">
 <iframe id="googleSlideIframe"
  width="100%" height="100%"
  src="{{ .Get "src" }}"
  frameborder="0" allowfullscreen=""
  style="position:absolute; top:0; left: 0"></iframe>
</div>

Step 3: Use shortcode ‘gslides’ in your Blog/Post Markdown file

Simply place below snippet in your markdown file.

Replace src value with your Google slide URL.

{{< gslides src="https://docs.google.com/presentation/d/e/2PACX-1vQExSl-gRPoA9hC6qXuqrjwiQVHAanDieZN_5GpV2Lw9cuxjsVFEN_wkTThqpQwZ36vJz4zwmTvV7cC/embed?start=false&loop=false&delayms=3000" >}}

I have shown for google slides, Similarly, you can create or add any other document type like google sheets, doc, etc. OR you can place any iframe like this.