Hugo: Shortcode für CCC Videos

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.

Kommentare

Sie können Ihr Fediverse-Konto (z. B. Mastodon und viele andere) verwenden, um auf diesen Beitrag zu antworten.