@dtcmedia/dtcmedia-video NPM

dtcmedia-video

A custom Vue.js web component for YouTube video's.

Features

Pause and play button
Play video inline or in a modal
Disabling/enabling autoplay on page load
Disabling/enabling controls by default
Disabling/enabling mute on page load
Disabling/enabling loop on video end
Disabling/enabling video based on view
Disabling/enabling cookies with URL

Getting started

Use the following code example to get you started:

<script src="https://unpkg.com/@dtcmedia/dtcmedia-video@^1/dist/dtcmedia-video.js"></script>

<dtcmedia-video
  autoplay="1"
  controls="1"
  cookies="1"
  height="100%"
  id="m_KBvP0_8Tc"
  loop="1"
  modal="0"
  mute="0"
  thumb="https://source.unsplash.com/collection/3697895"
  width="100%">
</dtcmedia-video>

Settings

Use the following options to customize the behavior for a video:

Option	Type	Default	Description
Debug	Number	0	Autoplay is disabled by default. Use value `1` to enable this feature.
Controls	Number	0	Interface is disabled by default. Use value `1` to enable this feature.
Height	String	100%	Height is set to `100%` by default. Customize with any number and valid unit.
ID	String	null	Last part of a YouTube url https://www.youtube.com/m_KBvP0_8Tc.
Loop	Number	0	Loop is disabled by default. Use value `1` to enable this feature.
Modal	Number	0	Modal is disabled by default. Use value `1` to enable this feature.
Mute	Number	0	Mute is disabled by default. Use value `1` to enable this feature.
Thumb	Number	0	Thumb set to YouTube's max resolution image by default. Customizable with an absolute URl.
Width	String	100%	Width is set to `100%` by default. Customize with any number and valid unit.
Cookies	Number	0	Changes YouTube URL to youtube-nocookie.com