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}} {{range .Formats}}
<div class="d-flex gap-3 mt-5 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}}"
      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}}