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 |