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.