Videos vom CCC mit einem Hugo-shortcode einbetten

Wer in seinem Hugo-Blog Videos vom Chaos Computer Club (media.ccc.de) einbinden möchte, kann dafür einen eigenen Shortcode erstellen. Dieser erspart es, jedes Mal den vollständigen iframe-Code manuell einzufügen, und hält die Markdown-Dateien übersichtlich.

Shortcode erstellen

#

Im Ordner layouts/shortcodes erstellt man einfach eine Datei namens ccc-video.html mit dem folgendne Inhalt:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

{{- $id := .Get "id" -}}
{{- $width := .Get "width" | default "100%" -}}
{{- $height := .Get "height" | default "576" -}}

{{ if $id }}
<div class="ccc-video-wrapper">
  <iframe
    width="{{ $width }}"
    height="{{ $height }}"
    src="https://media.ccc.de/v/{{ $id }}/oembed"
    frameborder="0"
    allowfullscreen>
  </iframe>
</div>
{{ else }}
  {{ errorf "ccc-video shortcode: Parameter 'id' fehlt!" }}
{{ end }}

Verwendung

#

Mit der Video-ID aus der URL von media.ccc.de lässt sich ein Video nun ganz einfach einbinden. Hier als Beispiel den Vortrag von Jörg Kastning auf den Chemnitzer Linux Tagen 2026:

1

{{< ccc-video id="clt26-116-der-kunde-lugt-immer-und-im-support-kann-niemand-lesen" >}}

Optional kann auch die Größe des Players angepasst werden:

1

{{< ccc-video id="clt26-116-der-kunde-lugt-immer-und-im-support-kann-niemand-lesen" width="800" height="450" >}}

Wird der Parameter id weggelassen, gibt Hugo beim Bauen der Seite eine Fehlermeldung aus, damit der Fehler nicht unbemerkt bleibt.