youtube

Source

<drab-youtube uid="gouiY85kD2o">
    <iframe
        data-content
        loading="lazy"
        title="Renegade - Kevin Olusola"
        class="aspect-video w-full rounded"
    ></iframe>
</drab-youtube>

Overview

Embeds a YouTube video iframe into a website with the video uid, using www.youtube-nocookie.com.

Constructors

constructor

• new YouTube(): YouTube

Properties

#listenerController

• Private #listenerController: AbortController

To clean up event listeners added to document when the element is removed.

Inherited from

Base.#listenerController

Defined in

src/package/base/index.ts:17

observedAttributes

▪ Static observedAttributes: readonly ["autoplay", "start", "uid"]

Defined in

src/package/youtube/index.ts:10

Name	Type
`value`	`boolean`

Name	Type
`value`	keyof `HTMLElementEventMap`

Name	Type
`value`	`string`

Name	Type
`v`	`string`

Methods

attributeChangedCallback

▸ attributeChangedCallback(): void

Returns

void

Defined in

src/package/youtube/index.ts:62

connectedCallback

▸ connectedCallback(): void

Returns

void

Inherited from

Base.connectedCallback

Defined in

src/package/base/index.ts:152

destroy

▸ destroy(): void

Passed into disconnectedCallback, since Base needs to run disconnectedCallback as well. It is overridden in each element that needs to run disconnectedCallback.

Returns

void

Inherited from

Base.destroy

Defined in

src/package/base/index.ts:159

disconnectedCallback

▸ disconnectedCallback(): void

Returns

void

Inherited from

Base.disconnectedCallback

Defined in

src/package/base/index.ts:161

getContent

▸ getContent<T>(instance?): T

Type parameters

Name	Type
`T`	extends `HTMLElement` = `HTMLElement`

Parameters

Name	Type	Description
`instance`	() => `T`	The instance of the desired element, ex: `HTMLDialogElement`. Defaults to `HTMLElement`.

Returns

T

The element that matches the content selector.

Default

this.querySelector("[data-content]");

Inherited from

Base.getContent

Defined in

src/package/base/index.ts:55

getTrigger

▸ getTrigger<T>(): NodeListOf<T>

Type parameters

Name	Type
`T`	extends `HTMLElement` = `HTMLElement`

Returns

NodeListOf<T>

All of the elements that match the trigger selector.

Default

this.querySelectorAll("[data-trigger]");

Inherited from

Base.getTrigger

Defined in

src/package/base/index.ts:42

mount

▸ mount(): void

Passed into queueMicrotask in connectedCallback. It is overridden in each component that needs to run connectedCallback.

The reason for this is to make these elements work better with frameworks like Svelte. For SSR this isn’t necessary, but when client side rendering, the HTML within the custom element isn’t available before connectedCallback is called. By waiting until the next microtask, the HTML content is available—then for example, listeners can be attached to elements inside.

Returns

void

Overrides

Base.mount

Defined in

src/package/youtube/index.ts:56

safeListener

▸ safeListener<K, T>(type, listener, element?, options?): void

Wrapper around document.body.addEventListener that ensures when the element is removed from the DOM, these event listeners are cleaned up.

Type parameters

Name	Type
`K`	extends keyof `DocumentEventMap`
`T`	extends `Window` \| `Document` \| `HTMLElement` = `HTMLElement`

Parameters

Name	Type
`type`	`K`
`listener`	(`this`: `T`, `ev`: `DocumentEventMap`[`K`]) => `any`
`element`	`T`
`options`	`AddEventListenerOptions`

Returns

void

Inherited from

Base.safeListener

Defined in

src/package/base/index.ts:118

swapContent

▸ swapContent(revert?, delay?): void

Finds the HTMLElement | HTMLTemplateElement via the swap selector and swaps this.content() with the content of the element found.

Parameters

Name	Type	Default value	Description
`revert`	`boolean`	`true`	Swap back to old content
`delay`	`number`	`800`	Wait time before swapping back

Returns

void

Inherited from

Base.swapContent

Defined in

src/package/base/index.ts:72

triggerListener

▸ triggerListener<T, K>(listener, type?, options?): void

Type parameters

Name	Type
`T`	extends `HTMLElement`
`K`	extends keyof `HTMLElementEventMap`

Parameters

Name	Type	Description
`listener`	(`this`: `T`, `e`: `HTMLElementEventMap`[`K`]) => `any`	Listener to attach to all of the `trigger` elements.
`type`	`K`	-
`options?`	`AddEventListenerOptions`	-

Returns

void

Inherited from

Base.triggerListener

Defined in

src/package/base/index.ts:135