ytdl-web/web/views/download.html

<div class="d-flex flex-column align-items-center">
  <h1>Download Video</h1>
  <h2 class="fs-4 text-muted">{{.Meta.Title}}</h2>
  <p style="font-size: 0.85rem">{{.Url}}</p>
  <img src="{{.Meta.Thumbnail}}" alt="{{.Meta.Title}}" style="max-height: 25rem; max-width: 100%" />
  <a href="{{.BasePath}}/" class="btn btn-secondary btn-sm mt-3" style="width: 30rem; max-width: 100%">
    Download Another Video
  </a>
</div>

{{$id := .Meta.ID}}
{{$url := .Url}}
{{$basePath := .BasePath}}

<div class="d-flex flex-column gap-4 mt-5">
  {{range .Formats}}
  <div class="d-flex gap-3 align-items-center">
    <div style="width: 10rem">{{.Format}}</div>
    <div class="flex-grow-1 d-flex gap-3">
      <a class="btn btn-primary flex-grow-1" download="{{$id}}-{{.Resolution}}.{{.Ext}}" P href="{{.Url}}">
        Download (direct)
      </a>
      <a class="btn btn-primary flex-grow-1" download="{{$id}}-{{.Resolution}}.{{.Ext}}"
        href="{{$basePath}}/download/proxy?url={{queryEscape $url}}&format={{.FormatID}}">
        Download (proxied)
      </a>
    </div>
  </div>
  {{end}}
</div>