https://www.madisonpipe.com/static/lite-youtube.js

1/**
2 *
3 * The shadowDom / Intersection Observer version of Paul's concept:
4 * https://github.com/paulirish/lite-youtube-embed
5 *
6 * A lightweight YouTube embed. Still should feel the same to the user, just
7 * MUCH faster to initialize and paint.
8 *
9 * Thx to these as the inspiration
10 *   https://storage.googleapis.com/amp-vs-non-amp/youtube-lazy.html
11 *   https://autoplay-youtube-player.glitch.me/
12 *
13 * Once built it, I also found these (👍👍):
14 *   https://github.com/ampproject/amphtml/blob/master/extensions/amp-youtube
15 *   https://github.com/Daugilas/lazyYT https://github.com/vb/lazyframe
16 */
17export class LiteYTEmbed extends HTMLElement {
18    constructor() {
19        super();
20        this.iframeLoaded = false;
21        this.setupDom();
22    }
23    static get observedAttributes() {
24        return ['videoid'];
25    }
26    connectedCallback() {
27        this.addEventListener('pointerover', LiteYTEmbed.warmConnections, {
28            once: true,
29        });
30        this.addEventListener('click', () => this.addIframe());
31    }
32    get videoId() {
33        return encodeURIComponent(this.getAttribute('videoid') || '');
34    }
35    set videoId(id) {
36        this.setAttribute('videoid', id);
37    }
38    get videoTitle() {
39        return this.getAttribute('videotitle') || 'Video';
40    }
41    set videoTitle(title) {
42        this.setAttribute('videotitle', title);
43    }
44    get videoPlay() {
45        return this.getAttribute('videoPlay') || 'Play';
46    }
47    set videoPlay(name) {
48        this.setAttribute('videoPlay', name);
49    }
50    get videoStartAt() {
51        return Number(this.getAttribute('videoStartAt') || '0');
52    }
53    set videoStartAt(time) {
54        this.setAttribute('videoStartAt', String(time));
55    }
56    get autoLoad() {
57        return this.hasAttribute('autoload');
58    }
59    set autoLoad(value) {
60        if (value) {
61            this.setAttribute('autoload', '');
62        }
63        else {
64            this.removeAttribute('autoload');
65        }
66    }
67    get params() {
68        return `start=${this.videoStartAt}&${this.getAttribute('params')}`;
69    }
70    /**
71     * Define our shadowDOM for the component
72     */
73    setupDom() {
74        const shadowDom = this.attachShadow({ mode: 'open' });
75        shadowDom.innerHTML = `
76      <style>
77        :host {
78          contain: content;
79          display: block;
80          position: relative;
81          width: 100%;
82          padding-bottom: calc(100% / (16 / 9));
83        }
84
85        #frame, #fallbackPlaceholder, iframe {
86          position: absolute;
87          width: 100%;
88          height: 100%;
89        }
90
91        #frame {
92          cursor: pointer;
93        }
94
95        #fallbackPlaceholder {
96          object-fit: cover;
97        }
98
99        #frame::before {
100          content: '';
101          display: block;
102          position: absolute;
103          top: 0;
104          background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==);
105          background-position: top;
106          background-repeat: repeat-x;
107          height: 60px;
108          padding-bottom: 50px;
109          width: 100%;
110          transition: all 0.2s cubic-bezier(0, 0, 0.2, 1);
111          z-index: 1;
112        }
113        /* play button */
114        .lty-playbtn {
115          width: 70px;
116          height: 46px;
117          background-color: #212121;
118          z-index: 1;
119          opacity: 0.8;
120          border-radius: 14%; /* TODO: Consider replacing this with YT's actual svg. Eh. */
121          transition: all 0.2s cubic-bezier(0, 0, 0.2, 1);
122          border: 0;
123        }
124        #frame:hover .lty-playbtn {
125          background-color: #f00;
126          opacity: 1;
127        }
128        /* play button triangle */
129        .lty-playbtn:before {
130          content: '';
131          border-style: solid;
132          border-width: 11px 0 11px 19px;
133          border-color: transparent transparent transparent #fff;
134        }
135        .lty-playbtn,
136        .lty-playbtn:before {
137          position: absolute;
138          top: 50%;
139          left: 50%;
140          transform: translate3d(-50%, -50%, 0);
141        }
142
143        /* Post-click styles */
144        .lyt-activated {
145          cursor: unset;
146        }
147
148        #frame.lyt-activated::before,
149        .lyt-activated .lty-playbtn {
150          display: none;
151        }
152      </style>
153      <div id="frame">
154        <picture>
155          <source id="webpPlaceholder" type="image/webp">
156          <source id="jpegPlaceholder" type="image/jpeg">
157          <img id="fallbackPlaceholder" referrerpolicy="origin">
158        </picture>
159        <button class="lty-playbtn"></button>
160      </div>
161    `;
162        this.domRefFrame = this.shadowRoot.querySelector('#frame');
163        this.domRefImg = {
164            fallback: this.shadowRoot.querySelector('#fallbackPlaceholder'),
165            webp: this.shadowRoot.querySelector('#webpPlaceholder'),
166            jpeg: this.shadowRoot.querySelector('#jpegPlaceholder'),
167        };
168        this.domRefPlayButton = this.shadowRoot.querySelector('.lty-playbtn');
169    }
170    /**
171     * Parse our attributes and fire up some placeholders
172     */
173    setupComponent() {
174        this.initImagePlaceholder();
175        this.domRefPlayButton.setAttribute('aria-label', `${this.videoPlay}: ${this.videoTitle}`);
176        this.setAttribute('title', `${this.videoPlay}: ${this.videoTitle}`);
177        if (this.autoLoad) {
178            this.initIntersectionObserver();
179        }
180    }
181    /**
182     * Lifecycle method that we use to listen for attribute changes to period
183     * @param {*} name
184     * @param {*} oldVal
185     * @param {*} newVal
186     */
187    attributeChangedCallback(name, oldVal, newVal) {
188        switch (name) {
189            case 'videoid': {
190                if (oldVal !== newVal) {
191                    this.setupComponent();
192                    // if we have a previous iframe, remove it and the activated class
193                    if (this.domRefFrame.classList.contains('lyt-activated')) {
194                        this.domRefFrame.classList.remove('lyt-activated');
195                        this.shadowRoot.querySelector('iframe').remove();
196                        this.iframeLoaded = false;