https://www.dinemagazine.com/wp-content/plugins/media-ace/includes/lazy-load/assets/js/youtube.js?ver=1.4.13

1/* global document */
2/* global jQuery */
3
4(function ($) {
5
6    'use strict';
7
8    var loadYoutube = function() {
9        $('.mace-youtube').each(function() {
10            var $youtube = $(this);
11
12            if($youtube.is('.mace-youtube-loaded')) {
13                return;
14            }
15
16            var videoUrl = $youtube.attr('data-mace-video');
17            var thumbUrl = $youtube.attr('data-mace-video-thumb');
18
19            var image = $('<img />');
20            image.attr('src', thumbUrl);
21
22            // Lazy loading.
23            image.attr({
24                'width':        1600,
25                'height':       900,
26                'src':          'data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D\'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg\' viewBox%3D\'0 0 1600 900\'%2F%3E',
27                'data-src':     thumbUrl,
28                'data-expand':  600
29            });
30
31            image.addClass('lazyload');
32
33            image.on('load', function() {
34                $youtube.append( image );
35            }());
36
37            // Click to play YT.
38            $youtube.on('click', function() {
39                $youtube.find('iframe').remove();
40
41                var $iframe = $('<iframe>');
42
43                $iframe.on('load', function() {
44                    $youtube.trigger('maceIframeLoaded', [$iframe]);
45
46                    // Play video.
47                    $iframe[0].contentWindow.postMessage(JSON.stringify({
48                            'event': 'command',
49                            'func': 'playVideo',
50                            'args': ''}),
51                        '*');
52                });
53
54                $iframe.attr('frameborder', '0');
55                $iframe.attr('allowfullscreen', '');
56                $iframe.attr('src', videoUrl);
57
58                $youtube.empty().append($iframe);
59            });
60
61            $youtube.addClass('mace-youtube-loaded');
62        });
63    };
64
65    $(document).ready(function() {
66
67        loadYoutube();
68
69        $('body').on('maceLoadYoutube', loadYoutube);
70
71    });
72
73})(jQuery);
74