show native video controls when playing

public/javascripts/spacedeck_directives.js

@@ -52,9 +52,18 @@ function setup_directives() {
       }
 
       var play_func = function() {
-        video.play();
-        player_state = "playing";
-        update_view();
+        var playPromise = video.play();
+        if (playPromise !== undefined) {
+          playPromise.then(_ => {
+            // Automatic playback started!
+            player_state = "playing";
+            update_view();
+          })
+          .catch(error => {
+            // Auto-play was prevented
+            // Show paused UI.
+          });
+        }
       }
 
       var pause_func = function() {

public/stylesheets/style.css

@@ -15184,6 +15184,8 @@ button.close {
     width: 100%;
     height: 100%;
     background-size: cover; }
+    .artifact .video.playing video {
+      z-index: 1; }
     .artifact .video .title {
       position: absolute;
       bottom: 0px;
@@ -15197,13 +15199,15 @@ button.close {
       font-size: 10px; }
     .artifact .video video {
       width: 100%;
-      height: 100%; }
+      height: 100%;
+      position: absolute; }
     .artifact .video .tl-controls {
       position: absolute;
-      bottom: 10px;
+      top: 10px;
       left: 10px;
       right: 10px;
-      text-align: center; }
+      text-align: center;
+      z-index: 2; }
       .artifact .video .tl-controls .btn {
         margin-top: 20px; }
   .artifact .audio {