-
Notifications
You must be signed in to change notification settings - Fork 0
iframe API
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]
.
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).
- Home
- Serlo Infrastructure
- Serlo Infrastructure for Non programmers
- Resources for new programmers
- Setup of the toolchain
- Best Practices
- Data Privacy for Devs
- How Tos
- Single Sign On
- Integration with the Data Wallet
- User-Journey: SSO and Data Wallet
- User-Journey: Collaboration with Serlo Editor + Datenraum
- Integration of "Datenraum" into the Serlo Editor
- Introduction to the Serlo editor
- Core concepts of the Serlo editor
- Packages of the Serlo editor
- Creating a new plugin (outdated)
- Redux process in the Serlo editor
- The content format of the Serlo editor
- Serlo Editor Plugin Initial State
- How the Serlo Editor is integrated into edu-sharing via LTI
- Learner Events and xAPI