Youtube

The "Youtube" component allows you to easily add a Youtube video in almost any slide of your presentation.

Table of contents

Showcase

Installation

This component could be added to your web application using the following methods.

Using from a CDN

It's recommended to use unpkg to use the DeckDeckGo lazy image component from a CDN. To do so, add the following include script in the main HTML file of your project:

<script type="module" src="https://unpkg.com/@deckdeckgo/youtube@latest/dist/deckdeckgo-youtube/deckdeckgo-youtube.esm.js"></script> <script nomodule="" src="https://unpkg.com/@deckdeckgo/youtube@latest/dist/deckdeckgo-youtube/deckdeckgo-youtube.js"></script>

Install from NPM

Install it in your project from npm using the following command:

npm install @deckdeckgo/youtube

Framework integration

The Stencil documentation provide examples of framework integration for Angular, React, Vue and Ember.

That being said, commonly, you might either import or load it:

Import

import '@deckdeckgo/youtube';

Loader

import { defineCustomElements as deckDeckGoElement } from '@deckdeckgo/youtube/dist/loader'; deckDeckGoElement();

Usage

The "Youtube" slide's Web Component could be integrated using the tag <deckgo-youtube/>.

<deckgo-youtube src="https://www.youtube.com/watch?v=oUOjJIfPIjw"> </deckgo-youtube>

Slots

No slots are available for this component.

Attributes

This component offers the following options which could be set using attributes:

AttributeTypeDefaultDescription
srcstringThe source url, the Youtube url, of the video. Not embeddable url will be automatically converted to embeddable url supported by Youtube.
widthnumberThe width of the video player.
heightnumberThe height of the video player.
frame-titlestringA title for the frame, could be use for accessibility reason.
instantbooleanfalseIn case you would like to load the video as soon as the component is loaded.

Per default the video, respectively its iframe, won't be loaded (expect if you specify instant to true). Therefore it's up to you to call the method lazyLoadContent to create the video. The reason behind this decision is allowing you to lazy load your content.

Methods

The <deckgo-youtube/> component exposes the following methods:

Lazy load the video

lazyLoadContent(): Promise<void>

Modify video size on the fly

async updateIFrame(width: number, height: number)

Play the video

play(): Promise<void>

Pause the video

pause(): Promise<void>

Examples

The following code:

<deckgo-youtube width="200" height="100" instant="true" src="https://www.youtube.com/embed/Y97mEj9ZYmE" frameTitle="DeckDeckGo editor demo"></deckgo-youtube>

Renders the following video: