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....

April 13, 2020 · 1 min · Ashish Tiwari