Slide: Video

The "Video" slide let you add your own video or for example a Gif as MPEG-4 (MP4) to your presentation.

Table of contents

Layout

A Gif as video

0%0/0

Installation

This template could be added to your presentation using the following methods.

If you are using our Starter Kit, no need to worry about this, this template is included, therefore you could skip the "Installation" chapter.

From a CDN

It's recommended to use unpkg if you want to use this template 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/slide-video@latest/dist/deckdeckgo-slide-video/deckdeckgo-slide-video.esm.js"></script> <script nomodule="" src="https://unpkg.com/@deckdeckgo/slide-video@latest/dist/deckdeckgo-slide-video/deckdeckgo-slide-video.js"></script>

From NPM

To install this template in your project from npm run the following command:

npm install @deckdeckgo/slide-video

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/slide-video';

Loader

import { defineCustomElements as deckDeckGoSlideElement } from '@deckdeckgo/slide-video/dist/loader'; deckDeckGoSlideElement();

Usage

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

<deckgo-slide-video src="https://media.giphy.com/media/vv41HlvfogHAY/giphy.mp4"> <h1 slot="title">A Gif as video</h1> </deckgo-slide-video>

Slots

The slot title and content are optional. The slot content is displayed before the video.

Attributes

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

AttributeTypeDefaultDescription
autoplaybooleanfalseAutomatically start the video when the slide is displayed/reached.
loopbooleanfalseLoop the video.
mutedbooleantruePer default, the video is displayed without sounds.
playsinlinebooleantruePer default, the video plays inline.
typestring'video/mp4'The type of video.
srcstringThe source of the video. Could be a video added in your assets or an url.
widthnumberPer default the video width will be calculated according the content size available.Using this option you would be able to define your own width.
heightnumberPer default the video height will be calculated according the content size available.Using this option you would be able to define your own height.
custom-backgroundbooleanfalseIf you would provide a background for the all deck and a specific one for this slide, set this option to true
custom-actionsbooleanfalseIf you would provide actions for the all deck and a specific one for this slide, set this option to true

Theming

The following theming options will affect this component if set on its host or parent.

CSS4 variableDefaultNote
--background
--color
--slide-padding-top16pxPadding top of the all slide
--slide-padding-end32pxPadding right of the all slide
--slide-padding-bottom16pxPadding bottom of the all slide
--slide-padding-start32pxPadding left of the all slide
--zIndex1The z-index of the slide

Methods

The slide "Video" offers extra methods to play and pause the video clip. These methods are notably used by the [DeckDecGo]'s remote control.

Play the video

const slide = deck.getElementsByTagName('deckgo-slide-video'); await slide.play();

Pause the video

const slide = deck.getElementsByTagName('deckgo-slide-video'); await slide.pause();

Toggle the video

Toggle will take care to pause or play the video according its current state.

const slide = deck.getElementsByTagName('deckgo-slide-video'); await slide.toggle();

Get the video

The component does not expose all attributes, if you would like to interact with the video you could get a reference using the following method:

const slide = deck.getElementsByTagName('deckgo-slide-video'); const video = await getVideo(); // resolve an <HTMLMediaElement/> element