bitvid/dist/components/embed-video-modal.html

<!-- components/embed-video-modal.html -->
<div
  id="embedVideoModal"
  class="bv-modal modal-always-on-top hidden items-start justify-center md:items-center"
  role="dialog"
  aria-modal="true"
  aria-labelledby="embedVideoModalTitle"
  aria-describedby="embedVideoModalDescription"
  data-ds="new"
>
  <div class="bv-modal-backdrop" data-dismiss></div>

  <div class="modal-sheet max-h-modal-shell overflow-hidden flex flex-col w-full max-w-2xl" tabindex="-1">
    <div class="modal-header">
      <h2 id="embedVideoModalTitle" class="text-xl font-bold text-text">Embed Video</h2>
      <button
        id="closeEmbedVideoModal"
        class="modal-close"
        type="button"
        aria-label="Close embed modal"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="h-6 w-6"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M6 18L18 6M6 6l12 12"
          />
        </svg>
      </button>
    </div>

    <div class="modal-body space-y-6 overflow-y-auto flex-1 min-h-0 custom-scrollbar p-6">
      <p id="embedVideoModalDescription" class="text-sm text-muted">
        Generate an embed snippet to share this video on other sites.
      </p>

      <fieldset class="space-y-3">
        <legend class="text-sm font-semibold text-text">Playback source</legend>
        <div class="form-control" role="radiogroup" aria-labelledby="embedVideoModalTitle">
          <div class="menu sm:flex-row sm:flex-wrap sm:py-0" role="presentation">
            <label class="menu__item gap-3 px-0 py-0" for="embedVideoSourceCdn">
              <input
                type="radio"
                name="embedVideoSource"
                id="embedVideoSourceCdn"
                value="url"
                class="h-4 w-4 border-border bg-panel text-accent focus:ring-accent"
              />
              <span class="text-sm text-text">CDN (URL first)</span>
            </label>
            <label class="menu__item gap-3 px-0 py-0" for="embedVideoSourceP2p">
              <input
                type="radio"
                name="embedVideoSource"
                id="embedVideoSourceP2p"
                value="torrent"
                class="h-4 w-4 border-border bg-panel text-accent focus:ring-accent"
              />
              <span class="text-sm text-text">P2P (Magnet)</span>
            </label>
          </div>
        </div>
      </fieldset>

      <div class="grid gap-4 sm:grid-cols-2">
        <div class="space-y-2">
          <label for="embedVideoWidth" class="block text-sm font-medium text-text">Width</label>
          <input
            id="embedVideoWidth"
            type="number"
            class="input"
            min="200"
            step="1"
            value="640"
          />
        </div>
        <div class="space-y-2">
          <label for="embedVideoHeight" class="block text-sm font-medium text-text">Height</label>
          <input
            id="embedVideoHeight"
            type="number"
            class="input"
            min="200"
            step="1"
            value="360"
          />
        </div>
      </div>

      <div class="space-y-2">
        <label for="embedVideoSnippet" class="block text-sm font-medium text-text">
          Embed snippet
        </label>
        <textarea
          id="embedVideoSnippet"
          rows="5"
          class="textarea"
          readonly
        ></textarea>
        <p class="text-xs text-muted">
          Paste this HTML into your page. Adjust the size to fit your layout.
        </p>
        <p id="embedVideoStatus" class="text-xs text-muted" role="status" aria-live="polite">
          Embed snippet ready.
        </p>
      </div>
    </div>

    <div class="modal-footer flex flex-col gap-3 border-t border-border bg-panel/30 p-4 sm:flex-row sm:items-center sm:justify-between">
      <button id="cancelEmbedVideo" type="button" class="btn-ghost">
        Close
      </button>
      <button id="copyEmbedVideo" type="button" class="btn-primary">
        Copy
      </button>
    </div>
  </div>
</div>