The easiest way to get started is to login to your account and add a video there. We’ll provide the appropriate code snippet for you to embed into your site.

If you rather want to set it up manually or want to do more complex things, you can add the code snippet shown below to your page. In case you’re adding videos to multiple pages, we recommend adding the <script> it to the <head> of your site.

<script type="module">
  import { Player } from "https://cdn.video-dns.com/npm/@maveio/components/+esm";
</script>

<mave-player embed="ubg50Cq5Ilpnar1"></mave-player>

You can can learn more about our player here.

CDN or local

We offer three ways to serve the package, each with its own flavor. Our own unobtrusive method is exemplified above, running at https://cdn.video-dns.com/npm/@maveio/components/+esm. This option serves as our default and can be considered best practice.

If you prefer a global distribution approach, you have the alternative of using a third-party CDN like JSDelivr: https://esm.run/@maveio/components.

Lastly, you can opt to serve the files yourself. Download the package and run it by obtaining it from npmjs.com.

npm install @maveio/components

React, Vue or Svelte

Vue and Svelte can use our regular library as it can work with webcomponents. React can use this too, however React makes certain assumptions with HTML elements that can cause problems with custom elements. They’re working on addressing these issues. In the meantime we provide a React specific library that you can use instead, like so:

npm install @maveio/components

import { Player } from "@maveio/components/react";

export default function App() {
  return (
    <div className="app">
      <Player embed="ubg507Sd0mszn4F"></Player>
    </div>
  );
}