/**
*
* The shadowDom / Intersection Observer version of Paul's concept:
* https://github.com/paulirish/lite-youtube-embed
*
* A lightweight YouTube embed. Still should feel the same to the user, just
* MUCH faster to initialize and paint.
*
* Thx to these as the inspiration
* https://storage.googleapis.com/amp-vs-non-amp/youtube-lazy.html
* https://autoplay-youtube-player.glitch.me/
*
* Once built it, I also found these (👍👍):
* https://github.com/ampproject/amphtml/blob/master/extensions/amp-youtube
* https://github.com/Daugilas/lazyYT https://github.com/vb/lazyframe
*/
export declare class LiteYTEmbed extends HTMLElement {
shadowRoot: ShadowRoot;
private iframeLoaded;
private domRefFrame;
private domRefImg;
private domRefPlayButton;
constructor();
static get observedAttributes(): string[];
connectedCallback(): void;
get videoId(): string;
set videoId(id: string);
get videoTitle(): string;
set videoTitle(title: string);
get videoPlay(): string;
set videoPlay(name: string);
get videoStartAt(): number;
set videoStartAt(time: number);
get autoLoad(): boolean;
set autoLoad(value: boolean);
get params(): string;
/**
* Define our shadowDOM for the component
*/
private setupDom;
/**
* Parse our attributes and fire up some placeholders
*/
private setupComponent;
/**
* Lifecycle method that we use to listen for attribute changes to period
* @param {*} name
* @param {*} oldVal
* @param {*} newVal
*/
attributeChangedCallback(name: string, oldVal: unknown, newVal: unknown): void;
/**
* Inject the iframe into the component body
*/
private addIframe;
/**
* Setup the placeholder image for the component
*/
private initImagePlaceholder;
/**
* Setup the Intersection Observer to load the iframe when scrolled into view
*/
private initIntersectionObserver;
private static preconnected;
/**
* Add a to the head
* @param {*} kind
* @param {*} url
* @param {*} as
*/
private static addPrefetch;
/**
* Begin preconnecting to warm up the iframe load Since the embed's netwok
* requests load within its iframe, preload/prefetch'ing them outside the
* iframe will only cause double-downloads. So, the best we can do is warm up
* a few connections to origins that are in the critical path.
*
* Maybe `` would work, but it's unsupported:
* http://crbug.com/593267 But TBH, I don't think it'll happen soon with Site
* Isolation and split caches adding serious complexity.
*/
private static warmConnections;
}
declare global {
interface HTMLElementTagNameMap {
'lite-youtube': LiteYTEmbed;
}
}