Snippet

Code to copy, with a copy button in the corner.

  • kit.snippet()
  • 1.1 KB of CSS · 30 rules
  • kit.css
  • kit-web.js for its behaviour
<iframe src="https://openvibe.live/embed/goosely" allow="autoplay; fullscreen"></iframe>

Use it

On your server

const kit = require('openvibe-shared/kit');

const html = kit.snippet({
      id: 'embed',
      code: '<iframe src="https://openvibe.live/embed/goosely" allow="autoplay; fullscreen"></iframe>'
  });

In a page that draws itself

<link rel="stylesheet" href="https://openvibe.network/shared/kit.css">
<script src="https://openvibe.network/shared/kit.js"></script>
<script src="https://openvibe.network/shared/kit-web.js" defer></script>

<script>
  const box = document.querySelector('#here');
  box.innerHTML = OpenVibeKit.snippet({
        id: 'embed',
        code: '<iframe src="https://openvibe.live/embed/goosely" allow="autoplay; fullscreen"></iframe>'
    });
  OpenVibeKit.enhance(box);
</script>
The HTML it returns · 547 B
<div class="ovk-snip"><button type="button" class="ovk-icon-btn" data-ovk-copy="#embed" aria-label="Copy" title="Copy" hidden><svg class="ovk-i" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><rect x="8" y="8" width="12.5" height="12.5" rx="2.1"/><path d="M16.3 8V5.8a2.1 2.1 0 0 0-2.1-2.1H5.8a2.1 2.1 0 0 0-2.1 2.1v8.4a2.1 2.1 0 0 0 2.1 2.1h2.1"/></svg></button><pre tabindex="0" id="embed"><code>&lt;iframe src=&quot;https://openvibe.live/embed/goosely&quot; allow=&quot;autoplay; fullscreen&quot;&gt;&lt;/iframe&gt;</code></pre></div>

What it weighs

Its own rules are 5.0 KB, 1.1 KB as sent: 6% of the kit's CSS. A page that draws it pays for the whole stylesheet once, and every other part comes free.