iframe API

How can I embed Serlo content?

Given the the id of the Serlo content (which is always the number in the URL of the content), you can embed the content within an iframe:

<iframe src="https://de.serlo.org/1553?contentOnly"></iframe>

The embedding will remove header, footer and sidebars and will focus on the content only:

Basically you just need to append the parameter ?contentOnly to the URL https://serlo.org/[ID].

How can I resize the iframe that it fits the width and height of the content?

You have to fix the width and height of the content. If you want to resize the content dynamically, we support iframe-resizer. Here is a basic example of how to use it:

<script
  src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.2/iframeResizer.min.js"
  integrity="sha512-dnvR4Aebv5bAtJxDunq3eE8puKAJrY9GBJYl9GC6lTOEC76s1dbDfJFcL9GyzpaDW4vlI/UjR8sKbc1j6Ynx6w=="
  crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<iframe src="https://de.serlo.org/1553?contentOnly"></iframe>

<script>
  iFrameResize({ log: true }, 'iframe')
</script>

You can also include npm package iframe-resizer directly in your application (see the documentation of the package on the [respective page]](https://www.npmjs.com/package/iframe-resizer)). Links in the iframe are all opened in a new tab (due to security limitations).