Hugo: Shortcode für CCC Videos

Datum: Donnerstag, 9. Juni 2022

Tag(s): hugo Shortcode CCC Videos Chaos Computer Club html css Tutorial

Ich binde immer mal wieder Videos vom Chaos Computer Club auf meinen Blogs ein. In der Vergangenheit habe ich dafür die YouTube-Videos verwendet, allerdings können diese theoretisch ja von Google gelöscht werden und sind auch aus Sicht von DSGVO nicht unbedenklich.

Eine bessere Lösung zum Einbinden ist das Verwenden des iFrame-Codes, welches auf media.ccc.de bei jedem Video angezeigt wird.

Für den statischen Seiten-Generator “Hugo” habe ich mir einen Shortcode gebaut, welchen jeder auch einfach einbinden kann.

Das CSS

Folgendes unter themes/(name-des-designs)/static/(name-des-styles).css hinzufügen:

.video-container {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}

.video-iframe {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
}

Der HTML-Code

Eine neue Datei themes/(name-des-designs)/layouts/shortcodes/ccc.html mit dem folgenden Inhalt anlegen.

<div class="video-container">
    <iframe class="video-iframe" src="{{ with .Get "url" }}{{ . }}/oembed{{ end }}" frameborder="0" allowfullscreen></iframe>
</div>

Die Verwendung

In der jeweiligen Seite oder dem jeweiligen Post dann einfach den Shortcode wie folgt verwenden:

{{< ccc url="https://media.ccc.de/v/rc3-659299-bundesanzeiger_crawling" >}}

Dabei ist https://media.ccc.de/v/rc3-659299-bundesanzeiger_crawling die URL des Videos.