reveal-frame-component

0.0.1 • Public • Published

Reveal Frame Component

A privacy-minded iFrame placeholder component.

This component will hide iframes behind a placeholder until the user clicks on it. No request is made until the user clicks on the placeholder. This way, it is possible to ask for consent before an external iframe is being loaded.

Installation

You can use NPM to install this component.

npm i --save reveal-frame-component

Usage

To use this web component in your project you can utilize one of the following styles of syntax.

/* In an existing module / web component */
import 'reveal-frame-component';
/* At top of an application */
<script type="module" src="node_modules/reveal-frame-component/dist/bundle.js"></script>
/* Alternatives for top of application */
<script type="module">
  import 'reveal-frame-component';
</script>

Now, you can replace iframe tags with reveal-frame and a placeholder text.

<reveal-frame width="560" height="315" src="https://www.youtube.com/embed/4YxTa1AUqps" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" >
  <p><b>Click to play.</b></p>
  <p>By clicking, data will be sent to YouTube.</p>
</reveal-frame>

Properties

Property Attribute Type Description Example
width width String Width in pixels or percentual value. 100%
height height String Height in pixels. 160
src src String IFrame source URL. http://example.com/
allow allow String Feature policy for iFrame fullscreen

License

MIT

Readme

Keywords

none

Package Sidebar

Install

npm i reveal-frame-component

Weekly Downloads

0

Version

0.0.1

License

MIT

Unpacked Size

194 kB

Total Files

17

Last publish

Collaborators

  • vwochnik