Video mit Vorschaubild #15
Description
Wenn man in Contao ein Video von Youtube mit Vorschaubild einsetzt oder z.B. UserCentrics nutz, dann erzeugt der Padding einen riesigen Abstand:
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(); ?>