bday2020/ui/src/components/BDay.vue

<template>
  <div class="bday">
    <h1>Alles Gute zu Deinem Geburtstag!</h1>
    <vue-plyr :options="plyr_options">
      <video poster="../assets/poster.png" autoplay="true">
        <source src="/fake_api/part1_240.mp4" type="video/mp4" size="240" />
        <source src="/fake_api/part1_360.mp4" type="video/mp4" size="360" />
        <source src="/fake_api/part1_480.mp4" type="video/mp4" size="480" />
      </video>
    </vue-plyr>
  </div>
</template>

<script>
export default {
  name: "BDay",

  data: () => ({
    plyr_options: {
      clickToPlay: false,
      keyboard: { focused: false, global: false },
      controls: ["mute", "volume", "settings", "airplay", "fullscreen"],
      settings: ["quality"],
    },
  }),

  mounted: () => {
    document.title = "Herzlichen Glückwunsch!";
  },
};
</script>

<style scoped>
div.bday {
  margin: auto;
  max-width: 850px;
}
</style>