Ich habe das template "friends-of-contao/contao-privacy/ce_youtube.html5" entsprechend den Angaben
von kulturbanause wie folgt geändert - evtl. kann es ja jemand gebrauchen:
ce_youtube_responsive.html5:
PHP-Code:
<?php $this->extend('block_unsearchable'); ?>
<?php $this->block('content'); ?>
<?php if ($this->videoSplash): ?><div class="yt_wrapper">
<figure id="videoSplash<?= $this->id ?>" class="image_container" data-video="<?= $this->src ?>">
<?php $this->insert('picture_default', $this->splashImage->picture); ?>
</figure></div>
<script>
document.getElementById('videoSplash<?= $this->id ?>').addEventListener('click', function(e) {
var iframe = document.createElement('iframe');
iframe.src = this.dataset['video'];
iframe.width = <?= $this->width ?>;
iframe.height = <?= $this->height ?>;
iframe.setAttribute('allowfullscreen', '');
this.parentNode.replaceChild(iframe, this);
});
</script>
<?php else: ?>
<div class="yt_wrapper"><iframe <?= $this->size ?> src="<?= $this->src ?>" allowfullscreen></iframe></div>
<?php endif; ?>
<?php $this->endblock(); ?>
Und dann im CSS:
Code:
.ce_youtube .yt_wrapper {
position: relative;
padding-bottom: 56%;
padding-top: 0px;
height: 0px;
overflow: hidden;
cursor: pointer
}
.ce_youtube .yt_wrapper figure img,.ce_youtube .yt_wrapper iframe,.ce_youtube .yt_wrapper object,.ce_youtube .yt_wrapper embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%
}
Lesezeichen