hugo-theme-learn icon indicating copy to clipboard operation
hugo-theme-learn copied to clipboard

Embed iframe

Open opoyc opened this issue 4 years ago • 2 comments

Hi, thanks for the theme, it's pretty cool! Just one thing, I'm trying to embed an iframe pptx from the web office, but I cannot.

opoyc avatar Oct 09 '20 14:10 opoyc

Only writing <iframe></iframe> in learn theme's markdown is doesn't work, but it's easy to do the same thing. For me, just make file at /rootofyourhugoblog/layout/shortcodes/myiframe.html put them in myiframe.html

<script>
    function resizeIframe(obj) {
      obj.style.height =  1.05*obj.contentWindow.document.body.scrollHeight + 'px';
    }
  </script>

<iframe width="100%" height="150" name="iframe" src="./{{ index .Params 0 }}" 
    frameborder="0" 
    scrolling="no" 
    onload="resizeIframe(this)">
</iframe>

Then write them in your markdown:

{{< myiframe the_url_your_want_put_in_iframe >}}

Then build the website: hugo server, fin.

WeiMXi avatar Nov 30 '20 11:11 WeiMXi

@WeiMXi's Solution worked for me perfectly. Thank you.

avoajaugochukwu avatar Jun 22 '21 19:06 avoajaugochukwu