Video mit Vorschaubild

[katgirl]

Wenn man in Contao ein Video von Youtube mit Vorschaubild einsetzt oder z.B. UserCentrics nutz, dann erzeugt der Padding einen riesigen Abstand:

https://github.com/ErdmannFreunde/euf_nutshell/blob/master/files/nutshell/scss/components/_media.scss#L110

Ich habe aktuell keine Möglichkeit gesehen zu prüfen ob das Kindelement ein Link oder iFrame ist. Vielleicht fäält dir ja was ein.

<figure class="video_container">
<a><img ></a>
</figure>

// bzw. 
<figure class="video_container">
<iframe >
</figure>

ich habe jetzt erstmal das Template angepasst:

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

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

  <figure class="video_container" <?php if ($this->splashImage): ?>style="padding-bottom: 0;"<?php endif; ?>>
    <?php if ($this->aspect): ?>
      <div class="responsive ratio-<?= $this->aspect ?>">
    <?php endif; ?>
      <?php if ($this->splashImage): ?>
        <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.style.removeProperty("padding-bottom");
            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(); ?>

[denniserdmann]

Ich habe aktuell keine Möglichkeit gesehen zu prüfen ob das Kindelement ein Link oder iFrame ist.

Der neue :has-Pseudoselektor wäre die Lösung, ist aber noch nicht fertig 😕

Sofern das Vorschaubild die gleichen Proportionen wie das Video hat, also in 16:9 angelegt ist, könnten wir die Styles auch auf das Bild anwenden. Dann würde es passen. Bei einem 4:3 Bild sieht das natürlich dann doof aus, weil es verzerrt wird, aber dann hat man auch einen unschönen Sprung, wenn das iFrame nachgeladen wird.

Was denkst du?

[katgirl]

Das Video und das Bild haben die gleiche Auflösung.
Auf die Lösung bin ich gar nicht gekommen. Du hast Recht, es würde reichen wenn die Zeile
https://github.com/ErdmannFreunde/euf_nutshell/blob/master/files/nutshell/scss/components/_media.scss#L127

iframe, a {

wäre.