<template>
  <div class="row form-group" :key="$attrs.key">
    <!-- <label :for="localFormElement.key" class="col-md-3 col-xl-2">{{
      localFormElement.label
    }}</label> -->
    <div class="col-12">
      <vue-plyr :options="options">
        <video controls crossorigin playsinline data-poster="poster.jpg">
          <source size="720" :src="localFormElement.value" type="video/mp4" />
          <!-- <source size="1080" src="/path/to/video-1080p.mp4" type="video/mp4" /> -->
          <!-- <track
          default
          kind="captions"
          label="English captions"
          src="/path/to/english.vtt"
          srclang="en"
        /> -->
        </video>
      </vue-plyr>
    </div>
  </div>
</template>

<script>
import formBuilderMixin from "@mixins/formBuilderMixin";
export default {
  mixins: [formBuilderMixin],
};
</script>

<style scoped>
.form-control {
  height: auto !important;
}
</style>