Untitled fiddle

by danrossi303

HTML

<html lang="en">
  <head>
    <script
      type="module"
      src="https://cdn.jsdelivr.net/npm/@videojs/html/cdn/video.js"
    ></script>
 <script
      type="module"
      src="https://videos.electroteque.org/jsfiddle/videojs-hlsjs.module.js"
    ></script>
    
  </head>


  <script type="module">
    import {  UIElement } from "https://cdn.jsdelivr.net/npm/@videojs/html@10.0.0-beta.32/+esm";

    var PluginElement = class extends UIElement {
		
		connectedCallback() {
			super.connectedCallback();



		}		
	};

  class CustomPluginElement extends PluginElement {
    connectedCallback() {
			super.connectedCallback();

     
    }
  }

    customElements.define("video-plugin", CustomPluginElement);
  </script>

  <body>
    <div>
    <media-i18n lang="en">
      <video-player>
        <!--
    Skins contain the entire player UI and are easily swappable.
    They can each be "ejected" for full control and customization
    of UI components.
   -->
        <video-skin>
          <!--
        Media are players without UIs, handling networking
        and display of the media. They are easily swappable
        to handle different sources.
      --><video
            src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest2.mp4"
            playsinline
          ></video>

          <media-error-dialog>
  <media-dialog-backdrop></media-dialog-backdrop>
  <media-dialog-popup>
    <media-dialog-title></media-dialog-title>
    <media-dialog-description></media-dialog-description>
    <media-dialog-close></media-dialog-close>
  </media-dialog-popup>
</media-error-dialog>
         
          <video-plugin></video-plugin>
        </video-skin>
      </video-player>
    </media-i18n>
    </div>
  </body>
</html>

CSS

media-dialog-backdrop:not([data-open]),
media-dialog-popup:not([data-open]) {
  display: none;
}

media-dialog-backdrop[data-starting-style],
media-dialog-backdrop[data-ending-style],
media-dialog-popup[data-starting-style],
media-dialog-popup[data-ending-style] {
  opacity: 0;
}