Skip to content
Contao Handbuch

YouTube Splashscreen

alt!

  1. Splash-Image machen (Screenshot, Player-Icon per CSS ausblenden)
  2. youtube.svg und youtube-hover.svg kopieren (theme/img bzw. dist/img (?))
  3. Inhaltselement ce_youtube:
    • Player-Größe: eventuell angeben, muss nicht (dann 100% parent) - muss aber jedenfalls zum ausgewählten Seitenverhältnis passen
    • youtube-nocookie-domain im Seitenlayout aktivieren
    • Seitenverhältnis 16:9 (oder irgendeine Angabe für die Klasse .responsive)
    • Vorschaubild verwenden: Splash-Screen-Bild (ev. Bildgröße definieren)
  4. Template von Contao 4.9 nehmen (gibt’s das überhaupt noch) => {{link_url :: XX}} (XX: Seiten-ID der Datenschutzerklärung)
  5. _content-element.scss => Teil .ce_youtube kopieren

YouTube

Section titled “YouTube”

quasi datenschutzkonform einbinden

Einstellungen in ce_youtube

  • Quelle: YouTube ID
  • Player-Einstellungen: Die youtube-nocookie.com-Domain verwenden
  • Seitenverhältnis auswählen (damit die responsive Darstellung gewährleistet ist -> Seitenverhältnis ist im Stylesheet hinterlegt)
  • Vorschaubild laden (YouTube-Video mit Devtools untersuchen, Vorschaubild abspeichern)

Template ce_youtube Das abgeänderte Template enthält einen Verweis auf die Datenschutzseite, d.h., die ID muss jeweils angepasst werden:

<?php $this->extend('block_unsearchable'); ?>


<?php $this->block('content'); ?>


  <figure class="video_container">
    <?php if ($this->aspect): ?>
      <div class="responsive ratio-<?= $this->aspect ?>">
    <?php endif; ?>
      <?php if ($this->splashImage): ?>
      <p class="splashImageText">Mit dem Klick auf das Vorschaubild stimmen Sie ausdrücklich der Übertragung Ihrer IP-Adresse an YouTube zu. Details dazu entnehmen Sie bitte der <a rel="nofollow noopener noreferrer" href="{{link_url::80}}">Datenschutzerklärung.</a></p>
        <a id="splashImage_<?= $this->id ?>" href="<?= $this->src ?>">
          <?php $this->insert('picture_default', $this->splashImage->picture); ?>
        </a>
        <script>
          document.getElementById('splashImage_<?= $this->id ?>').addEventListener('click', function(e) {
            e.preventDefault();
            var iframe = document.createElement('iframe');
            iframe.src = this.href;
            iframe.width = '<?= $this->width ?>';
            iframe.height = '<?= $this->height ?>';
            iframe.setAttribute('allowfullscreen', '');
            this.parentNode.replaceChild(iframe, this);
          });
        </script>
      <?php else: ?>
        <iframe<?= $this->size ?> src="<?= $this->src ?>" allowfullscreen></iframe>
      <?php endif; ?>
    <?php if ($this->aspect): ?>
      </div>
    <?php endif; ?>
    <?php if ($this->caption): ?>
      <figcaption class="caption"><?= $this->caption ?></figcaption>
    <?php endif; ?>
  </figure>


<?php $this->endblock(); ?>

Dateiverwaltung Grafiken youtube.svg/youtube_hover.svg hochladen

Stylesheets anpassen

  1. _ce_youtube.scss einbinden Achtung hier müssen einige Anpassungen gemacht werden:
    (siehe auch egger-partner.at)
  • $variable raus/anpassen
  • breakpoint anpassen
  • Grafiken verlinken
  1. responsive.css aus dem Seitenlayout rausnehmen
  2. img {max-width: 100%, height: auto; vertical-align: bottom;} aus der responsive.css (von Contao) in ein anderes Stylesheet parken
  3. Viewport-Tag width=device-width, initial-scale=1.0 im Seitenlayout setzen