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

new YouTube()

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

Source

src/package/base/index.ts:17

observedAttributes

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

Source

src/package/youtube/index.ts:10

Accessors

autoplay

get autoplay(): boolean

Whether the video should start playing when loaded.

set autoplay(value): void

Parameters

• value: boolean

Returns

boolean

Source

src/package/youtube/index.ts:22

event

get event(): keyof HTMLElementEventMap

Event for the trigger to execute.

For example, set to "mouseover" to execute the event when the user hovers the mouse over the trigger, instead of when they click it.

Default

"click";

set event(value): void

Parameters

• value: keyof HTMLElementEventMap

Returns

keyof HTMLElementEventMap

Source

src/package/base/index.ts:30

iframe

get iframe(): HTMLIFrameElement

The HTMLIFrameElement within the element.

Returns

HTMLIFrameElement

Source

src/package/youtube/index.ts:17

start

get start(): string

The start time of the video (seconds).

set start(value): void

Parameters

• value: string

Returns

string

Source

src/package/youtube/index.ts:32

uid

get uid(): string

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 uid(v): void

Parameters

• v: string

Returns

string

Source

src/package/youtube/index.ts:46

Methods

attributeChangedCallback()

attributeChangedCallback(): void

Returns

void

Source

src/package/youtube/index.ts:62

connectedCallback()

connectedCallback(): void

Called when custom element is added to the page.

Returns

void

Inherited from

Base.connectedCallback

Source

src/package/base/index.ts:155

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

Source

src/package/base/index.ts:162

disconnectedCallback()

disconnectedCallback(): void

Called when custom element is removed from the page.

Returns

void

Inherited from

Base.disconnectedCallback

Source

src/package/base/index.ts:167

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.