docs: document the embed code & embed resizer option

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:'<iframe width=":w" height=":h" src="https://replacethiswithyoururl.io" frameBorder="0" scrolling="no" styles="width:100%"></iframe>'
   };
 
 
@@ -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
+<iframe width=":w" height=":h"
+src="https://app.wikonnect.org/embed/JJuzs-OAACU"  //replace this with your URL
+frameBorder="0" scrolling="no" styles="width:100%"></iframe
+```
+
 
 ### Extracting H5P
 1. Rename the H5P file extension from `.h5p` file to `.zip`