fix(html): remove redundant CDN CSS files and inline background skin styles (#1071)

packages/html/src/define/background/skin.ts

@@ -1,6 +1,17 @@
 import { ReactiveElement } from '@videojs/element';
 import { namedNodeMapToObject } from '@videojs/utils/dom';
 import { safeDefine } from '../safe-define';
+import styles from './skin.css?inline';
+
+const STYLES_ID = '__media-background-styles';
+
+function ensureBackgroundStyles(): void {
+  if (document.getElementById(STYLES_ID)) return;
+  const style = document.createElement('style');
+  style.id = STYLES_ID;
+  style.textContent = styles;
+  document.head.appendChild(style);
+}
 
 function getTemplateHTML(_attrs: Record<string, string>) {
   return /*html*/ `
@@ -20,6 +31,8 @@ export class BackgroundVideoSkinElement extends ReactiveElement {
   constructor() {
     super();
 
+    ensureBackgroundStyles();
+
     if (!this.shadowRoot) {
       this.attachShadow((this.constructor as typeof BackgroundVideoSkinElement).shadowRootOptions);
       this.shadowRoot!.innerHTML = getTemplateHTML(namedNodeMapToObject(this.attributes));