diff --git a/README.md b/README.md
index 1dcf29cb..cbd27245 100644
--- a/README.md
+++ b/README.md
@@ -76,20 +76,22 @@ The standalone H5P player constructor accepts two arguments.
### H5P Options
**Option name**|**Required**|**Description**
-----|-----|----
-`h5pJsonPath` | true | Path to the H5P content folder
-`frameCss` | true | URL to the standalone player `h5p.css`
-`frameJs` |true | URL to the standalone player `frame.bundle.js`
-`id` | false | Player unique identifier. Randomly generated by default
-`librariesPath` | false| Path where the player should find the H5P content libraries. Defaults to same as `h5pJsonPath`
-`contentJsonPath`|false | Path where the player should find the H5P `content.json` file. Defaults to `{h5pJsonPath}/content/`,
-`frame` |false| A boolean on whether to show frame and buttons below H5P
-`copyright` |false| A boolean on whether display copyright button
-`embed` |false| A boolean on whether display embed button
-`export` |false| A boolean on whether display a download button.
-`icon` |false| A boolean on whether display H5P icon
-`downloadUrl` |false| A path or a url that returns zipped h5p for download. The link is used by H5P `export` button
-`fullScreen` |false| A boolean on whether to enable fullscreen button if browser supports the feature. Default is `false`|
-`xAPIObjectIRI`|false| An identifier for a single unique Activity ~ utilized when generating xAPI [object](https://github.com/adlnet/xAPI-Spec/blob/master/xAPI-Data.md#acturi) field. Default is page host+pathname
+`h5pJsonPath` | Yes | Path to the H5P content folder
+`frameCss` | Yes | URL to the standalone player `h5p.css`
+`frameJs` |Yes | URL to the standalone player `frame.bundle.js`
+`id` | No | Player unique identifier. Randomly generated by default
+`librariesPath` | No| Path where the player should find the H5P content libraries. Defaults to same as `h5pJsonPath`
+`contentJsonPath`|No | Path where the player should find the H5P `content.json` file. Defaults to `{h5pJsonPath}/content/`,
+`frame` |No| A boolean on whether to show frame and buttons below H5P
+`copyright` |No| A boolean on whether display copyright button
+`export` |No| A boolean on whether display a download button.
+`icon` |No| A boolean on whether display H5P icon
+`downloadUrl` |No| A path or a url that returns zipped h5p for download. The link is used by H5P `export` button
+`fullScreen` |No| A boolean on whether to enable fullscreen button if browser supports the feature. Default is `false`|
+`xAPIObjectIRI`|No| An identifier for a single unique Activity ~ utilized when generating xAPI [object](https://github.com/adlnet/xAPI-Spec/blob/master/xAPI-Data.md#acturi) field. Default is page host+pathname
+`embed` |No| A boolean on whether display embed button. Default is `false`. N.B. Setting this option to `true` will require an `embedCode` below.
+`embedCode` |unless `embed` is true| Embed/Iframe code that user can insert on their site to view same content. Check some caveats to consider [below](#caveats-while-adding-embed-code)
+
**Note:**
- One can use absolute URL for `frameCss`, `frameJs`, and for other path options(`h5pJsonPath`,`librariesPath`, & `librariesPath`)
@@ -112,11 +114,12 @@ const options = {
librariesPath: "/path/to/shared/libaries", //shared libraries path
frame: true, //required to display copyright, embed, & export buttons
copyright: true,
- embed: false,
'export': false,
icon: true,
downloadUrl: '/path/to/exercise-one.h5p',
- fullScreen: true //enable fullscreen button
+ fullScreen: true //enable fullscreen button,
+ embed: true,
+ embedCode:''
};
@@ -208,6 +211,18 @@ async function myAwesomePlayer() {
myAwesomePlayer();
```
+### Caveats while adding embed code
+- This library includes an H5P resizer by default in `main.bundle.js` at the moment. But, to allow the iframe width to resize promptly, add CSS style setting the width to 100% i.e. `style="width:100%;"`
+- If you want to allow users to resize the iframe width and height, set them using placeholders provided by H5P i.e., `width=":w"` and `height=":h"`
+
+Example that combines above points:
+
+```js
+ {
expect(iframe.contents().find('.h5p-download-button')).to.exist;
});
});
+
+ it('should display embed code dialog', () => {
+
+ cy.visit('test/advance-options.html');
+ cy.get('.h5p-iframe').should((iframe) => {
+
+ expect(iframe.contents().find('.h5p-actions').find('.h5p-embed')).to.exist;
+
+ iframe.contents()
+ .find('.h5p-actions')
+ .find('.h5p-embed')
+ .click();
+
+ expect(iframe.contents().find('.h5p-embed-code-container')).to.exist;
+ expect(iframe.contents().find('.h5p-embed-size')).to.exist;
+ })
+
+ });
});
\ No newline at end of file
diff --git a/src/js/h5p-standalone.class.js b/src/js/h5p-standalone.class.js
index 2cc034e4..2ce88f1b 100644
--- a/src/js/h5p-standalone.class.js
+++ b/src/js/h5p-standalone.class.js
@@ -93,6 +93,11 @@ export default class H5PStandalone {
contentOptions.url = options.xAPIObjectIRI; //no validation
}
+ if (options.embedCode) { // this will not be dependent on displayOptions.embed
+ contentOptions.embedCode = options.embedCode;
+ contentOptions.resizeCode = options.resizeCode || ''; // resize code is already bundled in main.bundle.js
+ }
+
this.initElement(el);
return this.initH5P(generalIntegrationOptions, contentOptions);
diff --git a/test/advance-options.html b/test/advance-options.html
index d120a9be..8e7d2a51 100644
--- a/test/advance-options.html
+++ b/test/advance-options.html
@@ -10,18 +10,17 @@