drab - youtube

import "drab/youtube/define";

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

Overview

Defined in: youtube/index.ts:12

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

Constructors

new YouTube()

new YouTube(): YouTube

Defined in: youtube/index.ts:15

Properties

observedAttributes

static observedAttributes: readonly ["autoplay", "start", "uid"]

Defined in: youtube/index.ts:13

Accessors

autoplay

Get Signature

get autoplay(): boolean

Defined in: youtube/index.ts:25

Whether the video should start playing when loaded.

Set Signature

set autoplay(value): void

Defined in: youtube/index.ts:29

event

Set Signature

set event(value): void

Defined in: base/index.ts:46

iframe

Get Signature

get iframe(): HTMLIFrameElement

Defined in: youtube/index.ts:20

The HTMLIFrameElement within the element.

start

Get Signature

get start(): string

Defined in: youtube/index.ts:35

The start time of the video (seconds).

Set Signature

set start(value): void

Defined in: youtube/index.ts:39

uid

Get Signature

get uid(): string

Defined in: youtube/index.ts:49

The video’s YouTube uid, found within the url of the video.

For example if the video url is https://youtu.be/gouiY85kD2o, the uid is "gouiY85kD2o".

Set Signature

set uid(v): void

Defined in: youtube/index.ts:55

Methods

announce()

announce(message): void

Defined in: base/index.ts:53

Parameters

message

string

message to announce to screen readers

attributeChangedCallback()

attributeChangedCallback(): void

Defined in: youtube/index.ts:65

connectedCallback()

connectedCallback(): void

Defined in: base/index.ts:171

Called when custom element is added to the page.

destroy()

destroy(): void

Defined in: base/index.ts:178

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

disconnectedCallback()

disconnectedCallback(): void

Defined in: base/index.ts:181

Called when custom element is removed from the page.

mount()

mount(): void

Defined in: youtube/index.ts:59

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

safeListener()

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

Defined in: base/index.ts:136

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

swapContent(revert): void

Defined in: base/index.ts:93

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

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

Defined in: base/index.ts:153