improve ui

public/assets/css/app.css

@@ -27,6 +27,15 @@
     width: 100%;
 }
 
+.modal-movie .modal-content {
+    width: 95%;
+    max-width: 1280px;
+}
+
+.movie {
+    width: 100%;
+}
+
 @media screen and (max-width: 1024px) {
     .snapshot-link {
         width: 49%;

public/assets/js/app.js

@@ -91,9 +91,14 @@ var SnapshotEvent = function() {
         link.addEventListener('click', function(e) {
             e.preventDefault();
             view.innerHTML = template.innerHTML.replace('{src}', link.getAttribute('href'));
+
             view.querySelector('.modal-close').addEventListener('click', function() {
                 view.innerHTML = '';
             }, false);
+
+            view.querySelector('.modal-background').addEventListener('click', function() {
+                view.innerHTML = '';
+            }, false);
         });
     });
 }

templates/events.html.twig

@@ -26,10 +26,10 @@
     <div id="snapshot-view"></div>
 
     <template id="snapshot-template">
-        <div class="modal is-active">
+        <div class="modal is-active modal-movie">
             <div class="modal-background"></div>
             <div class="modal-content" controls>
-                <video controls class="image">
+                <video controls class="image movie">
                     <source src="{src}" type="video/mp4" />
                 </video>
             </div>