[RFC] video splash image

[fritzmg]

This PR implements #8 (also for Vimeo).

Example output:

<!-- indexer::stop -->
<div class="ce_youtube first block">
  <figure id="videoSplash1" class="image_container" data-video="https://www.youtube.com/embed/Hq9dQXUCFzk?autoplay=1">
    <img src="assets/images/e/image-cd3970d6.jpg" width="640" height="360" alt="" itemprop="image">
    <script>
      window.respimage && window.respimage({
        elements: [document.images[document.images.length - 1]]
      });
    </script>
  </figure>
  <script>
      document.getElementById('videoSplash1').addEventListener('click', function(e) {
        var iframe = document.createElement('iframe');
        iframe.src = this.dataset['video'];
        iframe.width = <?= $this->width; ?>;
        iframe.height = <?= $this->height; ?>;
        iframe.allowfullscreen = '';
        this.parentNode.replaceChild(iframe, this);
      });
  </script>
</div>
<!-- indexer::continue -->

[fritzmg]

/cc @netzarbeiter

[fritzmg]

Hm, this is still work in progress, I have an error in the JavaScript.

[fritzmg]

PR updated.

My experience with vanilla JavaScript is still a bit limited. However I think the provided code should work in most browsers. It works in IE 11, FireFox and Chrome at least ;)

[fritzmg]

Tested in Contao 4.4.18 and 4.5.8.