Contao 5: Video herunterladen verhindern

Anleitung für Contao 5.3

Rechtsklick-Schutz für Videos in Contao 5 mit Twig-Template-Override

Videos lassen sich in Contao über das Inhaltselement „Video/Audio“ oder über externe Anbieter wie YouTube und Vimeo einbinden. Standardmäßig besteht jedoch die Möglichkeit, per Rechtsklick das Kontextmenü des Browsers aufzurufen und Inhalte herunterzuladen. Um dies zu unterbinden, kann ein Template-Override in Twig eingesetzt werden.

Warum ein Override notwendig ist

In Contao 5 nutzen die Inhaltselemente Twig-Templates mit einer festen Namenskonvention. Das Video- und Audio-Element basiert auf content_element/player.html.twig. Anpassungen müssen deshalb in einem eigenen Template-Override erfolgen, nicht über die alten ce_*.html5-Dateien.

Die Agentur Zentral GmbH realisiert individuelle Twig-Anpassungen sowie maßgeschneiderte Contao-Programmierungen, um Webseiten funktional zu erweitern und optimal an Kundenbedürfnisse anzupassen.

Anfrage stellen

Template in Contao anlegen

Im Projektverzeichnis wird ein neuer Ordner angelegt: /templates/content_element/player.html.twig

Erweiterung des Core-Templates

Das neue Template erweitert das Core-Template und ergänzt Attribute sowie ein kurzes Script, um das Kontextmenü zu blockieren:

{% extends '@Contao/content_element/player.html.twig' %}

{% block content %}
  {{ parent() }}
  <script>
    (function(){
      var wrapper = document.currentScript.closest('.content-player') || document.currentScript.parentElement;
      if(!wrapper) return;
      var v = wrapper.querySelector('video, audio, iframe');

      if (v) {
        try { v.setAttribute('controlsList', 'nodownload noplaybackrate'); } catch(e){}
        v.setAttribute('disablepictureinpicture','');
        v.addEventListener('contextmenu', function(e){ e.preventDefault(); });
        v.addEventListener('dragstart',  function(e){ e.preventDefault(); });
      }
    })();
  </script>
{% endblock %}

Wirkung der Anpassung

  • controlsList="nodownload noplaybackrate" blendet Download- und Geschwindigkeitsoptionen aus (Browser-abhängig).
  • disablepictureinpicture deaktiviert die PiP-Funktion in Chromium-Browsern.
  • Das JavaScript blockiert das Kontextmenü und verhindert Drag&Drop-Aktionen.

Typische Stolperfallen

  • Der Template-Name muss exakt player.html.twig heißen.
  • Nach Änderungen muss der Cache geleert werden.

Fazit

Mit einem gezielten Template-Override in Contao 5 lassen sich Rechtsklick- und Download-Funktionen bei Video- und Audioelementen zuverlässig unterbinden. Der Schutz ist nicht absolut – im Browser-Cache liegen die Daten weiterhin vor –, aber er erhöht die Hürde erheblich und verhindert das einfache Abspeichern über Standardfunktionen.

Zurück zur Blog-Übersicht