JSFiddle - React, Tailwind, and code Playground

HTML

<template id="shadowtree">
  <video controls style="width:640px;height:360px;">
      <content></content>
  </video>
</template>
<video-player id="host" controls width="640" height="360" theme="blue">
       <source src="http://addyosmani.github.io/video-player/devstories.webm" type="video/webm;codecs='vp8, vorbis'">
       <source src="http://addyosmani.github.io/video-player/devstories.mp4" type="video/mp4;codecs='avc1.42E01E, mp4a.40.2'">
</video-player>

JavaScript

var VideoPlayer = Object.create(HTMLElement.prototype);
VideoPlayer.createdCallback = function() {
    var shadowRoot = host.createShadowRoot();
    var clone = document.importNode(shadowtree.content, true);
    shadowRoot.appendChild(clone);
};

var VPlayer = document.registerElement('video-player', {
  prototype: VideoPlayer
});