Embedded.js makes it easy to create and share responsive embeddable content. The library will create IFRAMEs and help resize them automatically.
It is used by SimplyBuilt and works great with our Embedded Widget feature!
Embedded.js consist of 3 parts:
- The hook script which loads the embed script and acts as an anchor for where content will be embedded.
- The embed script which dynamically creates IFRAME elements and communicates with them to determine the height.
- The client script which is used within the embedded content so it can communicate with the top-frame
Suppose we have some web content we want to be embeddable across the web. The usual recipe for this is to embed the content through an IFrame.
Since this content may be consumed on a variety of devices, it needs to be responsive and potentially variable in height. In order for embedding to work well, the IFrame in the top document needs to be able to dynamically resize itself to the height of the content. To achieve this we can use Embedded.js!
First, we set up a script tag with the hook and a few data attributes:
<script src="/js/hook.js" data-api="/js/embed.js" data-location="http://example.com/embeddable-content"></script>The data-api attribute specifies where to find the embed script.
The data-location attribute specifies the src attribute for the
dynamically created <iframe>.
Next, include the client script within the embedded content like so:
<head>
<script src="/js/client.js"></script>
</head>Voilà! We can now embed responsive content with ease!
Coming soon!
MIT
- Fork it
- Create your feature branch (
git checkout -b my-new-feature) - Commit your changes (
git commit -am 'Add some feature') - Push to the branch (
git push origin my-new-feature) - Create new Pull Request
Crafted with <3 by @SimplyBuilt.