dtcmedia-video

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

Features

1. Pause and play button
2. Play video inline or in a modal
3. Disabling/enabling autoplay on page load
4. Disabling/enabling controls by default
5. Disabling/enabling mute on page load
6. Disabling/enabling loop on video end
7. Disabling/enabling video based on view
8. Disabling/enabling cookies with URL

Getting started

Use the following code example to get you started:

<script src="https://unpkg.com/@powerkraut/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