Single opt-in for iframe resources like google maps, youtube and vimeo.
npm install iframe_single_optinJavaScript and CSS-styles to get an opt-in for iframe resources like YouTube, VIMEO and Google Maps.
``sh`
git clone https://github.com/sunixzs/iframe_single_opt_in.git
or as submodule:
`sh`
git init submodule
git submodule add https://github.com/sunixzs/iframe_single_opt_in.git path/to/be
`sh`
npm i iframe_single_optin
or
`sh`
yarn add iframe_single_optin
Include the stylesheet located in ./dist/css/iframe-single-opt-in.css or write your own. Of course you also may include the sources in ./src/scss.
There are at least two ways to include the script in a webpage:
Include script ./dist/js/iframe-single-opt-in-init.js in the bottom of the page and let the script find the elements by attribute data-toggle="iframe-single-opt-in".
The following attributes must further be set to the element:
- data-service data-iframe-markup
Either 'googlemaps', 'youtube' or 'vimeo'.
-
The export iframe markup of the service. Either plain markup or urlencoded. In all the services you find a share button. There is an option to embed into a webpage which produces an iframe tag. Just like you want to embed without opt-in.
The following attribut is not required and defaults to true:
- data-is-urlencoded iframe-markup
This declares, if is urlencoded or not.
An example markup could look like this:
`html
data-toggle="iframe-single-opt-in"
data-service="youtube"
data-iframe-markup="%3Ciframe[...]iframe%3E"
data-is-urlencoded="true"
>
$3
Include script
in the head section of the page (or just before calling IframeSingleOptIn). The script is bind to window.IframeSingleOptIn.Example:
`html
`Interface
js
/**
* @param {HTMLElement} container The container where the iframe should be placed in.
* @param {ServiceType} service Either 'googlemaps', 'youtube' or 'vimeo'.
* @param {string} iframeMarkup The iframe markup - urlencoded or not.
* @param {boolean} isUrlEncoded Is iframeMarkup urlencoded?
* @param {} params Additional params - see below
*/
IframeSingleOptIn(container, service, iframeMarkup, (isUrlEncoded = false), (params = {}));
`To urlencode the iframe markup you may use https://www.urlencoder.org/ which worked for me.
Params
| Param | Type | Default | Description |
| ---------------- | -------- | -------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
| string | 'External video' or 'External map' | Type relational visible title. |
| infoText | string | 'By loading this resource you agree the privacy policy of {SERVICE_NAME}.' | Type relational visible info text. |
| serviceUrlText | string | 'more information' | Visible text for the data privacy link of the service. |
| showText | string | 'show {SERVICE_NAME} video' | Type relational visible button text. |
| serviceUrl | string | 'http://[vimeo.com\|youtube.com\|maps.google.com]...' | Data privay URI of the service. |
| cssClass | string | 'isoi' | CSS-class prefix for the created elements. |
| language | object | {languageKey: { titleText:'Hey user', [...]}} | Another way to override the texts. languageKey will be set as current language. Have a look at ./src/ts/Language/LanguageData.default.ts for the text keys. |Texts for english and german are built in. Use
params.*Text to override some of them. The language will be determined by reading the lang-attribute of the html-tag (de for german and others for english).There is another way to override a complete language set by using
params.language. There is an example at the end of this page.Build in CSS
Set
class="isoi" to the container. isoi creates the basic structure.You could add one of the following classes as 'theme':
-
isoi--dark for a dark UI.
- isoi--light for a light UI.If you would like to set a predefined ratio, add these classes:
-
isoi--ratio isoi--ratio-16by9
-
-
- A complete set could be:
html
`Examples
There are some examples in ./dist/example.data-attribute.html, ./dist/example.instance.html and ./dist/example.override-language.html.
$3
The
parameter is only used to automatically use the build in texts. If you want to use another service, override the texts, but use one of the service names:`html
`Here is another example using the
parameter. Supported markers are {SERVICE_NAME} and {SERVICE_URL}html
``