{{ define "main" }}
<div class="layout layout-video">
  <h1><a class="no-underline" href="{{ .Permalink }}">{{ .Title | markdownify }}</a></h1>

  <video
    {{ with .Resources.GetMatch "thumb.*" }}poster="{{ .Permalink }}"{{ end }}
    controls playsinline>
    {{ with .Resources.GetMatch "*.webm" }}<source src="{{ .Permalink }}" type="video/webm">{{ end }}
    {{ with .Resources.GetMatch "*.mp4" }}<source src="{{ .Permalink }}" type="video/mp4">{{ end }}
    {{ with .Resources.GetMatch "*.ogg" }}<source src="{{ .Permalink }}" type="video/ogg">{{ end }}

    {{ with .Resources.GetMatch "*.en.vtt" }}<track src="{{ .Permalink }}" kind="captions" label="English" srclang="en" default>{{ end }}

    <p>Your browser doesn't support HTML5 video. {{ with .Resources.GetMatch "*.mp4" }}<a href="{{ .Permalink }}">Click here to view the raw .mp4 video.</a>{{ end }}</p>
  </video>

  {{ .Content }}
</div>
{{ end }}