function avideo()

in lib/a-video.js [22:87]


function avideo() {

    const self = this
    // should react on avideo::
    self.named('avideo')
    self.process(function (parent, target, attrs) {
        // rewrite the youtube code as image (  get from  https://i1.ytimg.com/vi/<videocode>/hq1.jpg )
        // place all the placeholder in placeholder file
        let imagetarget = 'placeholder/' + target + '.jpg'
        // get and id
        let idofvideoplaceholder = target + 'placeholder';
        // prepare attribute list for image
        let attribute = {'target': imagetarget, 'alt': 'placeholder for video ' + target}
        // script to play on click
        let script = `<script>
        function loadScript() {
            return new Promise((resolve, reject) => {
                let script = document.createElement('script');
                script.src = 'https://www.youtube.com/iframe_api';
                script.addEventListener('load', resolve);
                script.addEventListener('error', (e) => reject(e));
                document.body.appendChild(script);
            });
        }

        function addElement() {
            loadScript().then(() => {
                window.YT.ready(function() {
                    let player = new YT.Player('${idofvideoplaceholder}', {
                    height: '490',
                    width: '968',
                    videoId: '${target}',
                    playerVars: {
                        'playsinline': 1
                    },
                    events: {
                        'onReady': (event) => {
                            event.target.playVideo();
                        }
                    }
                    });
                });
            });
        }

        var container = document.querySelector('#${idofvideoplaceholder} .content');
        container.addEventListener('click', addElement);
</script>`

        const nodes = []
        // add title block if title is present
        if (attrs.title) {
            nodes.push(self.createBlock(parent, 'pass', `<div class="title" >` + attrs.title + `</div>`))
        }
        // create div wrapper with id of video for the script to get the correct video
        nodes.push(self.createBlock(parent, 'pass', `<div class="videoconsentblock" id="${idofvideoplaceholder}">`))
        // get image should be local
        // using block will trigger issue on image target not found
        nodes.push(self.createBlock(parent, 'image', "", attribute))
        nodes.push(self.createBlock(parent, 'pass', `</div>`))
        // Apache privacy
        nodes.push(self.createBlock(parent, 'paragraph', 'Clicking on the image above will load the video and send data from and to Google'))
        nodes.push(self.createBlock(parent, 'pass', script))
        parent.blocks.push(...nodes)
    })
}