display play button

ui/src/App.vue

@@ -35,7 +35,7 @@ html {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
-  color: #2c3e50;
+  color: #34214f;
   margin-top: 60px;
 }
 </style>

ui/src/components/BDay.vue

@@ -1,8 +1,12 @@
 <template>
-  <div class="bday">
+  <div id="bday">
     <h1>Alles Gute zu Deinem Geburtstag!</h1>
-    <vue-plyr :options="plyr_options">
-      <video poster="../assets/poster.png" autoplay="true">
+    <img id="play" v-if=play_visible src="../assets/play.png" usemap="#play" />
+    <map name="#play">
+      <area shape="circle" coords="50,50,50" />
+    </map>
+    <vue-plyr :options="plyr_options" :emit="['timeupdate']" @timeupdate="videoTimeUpdated">
+      <video poster="../assets/poster.png">
         <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" />
@@ -16,7 +20,10 @@ export default {
   name: "BDay",
 
   data: () => ({
+    play_visible: false,
+
     plyr_options: {
+      autoplay: true,
       clickToPlay: false,
       keyboard: { focused: false, global: false },
       controls: ["mute", "volume", "settings", "airplay", "fullscreen"],
@@ -24,15 +31,45 @@ export default {
     },
   }),
 
-  mounted: () => {
+  methods: {
+    videoTimeUpdated: function (event) {
+      // show play button after 3 seconds, then disable event
+      if (event.timeStamp > 3000) {
+        this.play_visible = true;
+        this.videoTimeUpdated = () => true;
+      }
+    }
+  },
+
+  mounted() {
     document.title = "Herzlichen Glückwunsch!";
   },
 };
 </script>
 
 <style scoped>
-div.bday {
+div#bday {
   margin: auto;
-  max-width: 850px;
+  width: 854px;
+  position: relative;
+}
+
+img#play {
+  outline: none;
+
+  -webkit-user-select: none; /* Safari */        
+  -moz-user-select: none; /* Firefox */
+  -ms-user-select: none; /* IE10+/Edge */
+  user-select: none; /* Standard */
+
+  position: absolute;
+  bottom: 190px;
+  left: 377px;
+  z-index: 1001;
+}
+
+map area{
+  outline: none;
+  cursor: pointer;
 }
 </style>