diff --git a/assets/video/vid_prologo.mp4 b/assets/video/vid_prologo.mp4
new file mode 100644
index 0000000..d0d448c
Binary files /dev/null and b/assets/video/vid_prologo.mp4 differ
diff --git a/assets/video/vid_viaggiatore.mp4 b/assets/video/vid_viaggiatore.mp4
new file mode 100644
index 0000000..6907963
Binary files /dev/null and b/assets/video/vid_viaggiatore.mp4 differ
diff --git a/css/main.css b/css/main.css
index 6e20463..ddd9691 100644
--- a/css/main.css
+++ b/css/main.css
@@ -38,6 +38,10 @@
 .text-14pt {
     font-size: 14pt;
 }
+video {
+    max-width: 100%;
+    cursor: pointer;
+}
 /** Font classes **/
 .arvo {
     font-family: 'arvoregular'/*Fallback??*/;
@@ -344,4 +348,8 @@ section.poi .container {
 }
 .lilac {
     color: var(--lilac);
+}
+/** Modals **/
+#mod-vid .modal-overlay {
+    background-color: #555;
 }
\ No newline at end of file
diff --git a/img/thumb_nobili.jpg b/img/thumb_nobili.jpg
new file mode 100644
index 0000000..722c4b3
Binary files /dev/null and b/img/thumb_nobili.jpg differ
diff --git a/img/thumb_viaggiatore.jpg b/img/thumb_viaggiatore.jpg
new file mode 100644
index 0000000..5e7f429
Binary files /dev/null and b/img/thumb_viaggiatore.jpg differ
diff --git a/itinerario.html b/itinerario.html
index 3a78343..9f29932 100644
--- a/itinerario.html
+++ b/itinerario.html
@@ -83,7 +83,7 @@
                 <div class="container">
                     <div class="columns mb-2">
                         <div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2">
-                            <a href="" title="Guarda il video">
+                            <a href="#open-vid" title="Guarda il video">
                                 <img src="img/thumb_prologo.jpg" alt="Prologo">
                             </a>
                         </div>
@@ -99,8 +99,8 @@
                             </p>
                         </div>
                         <div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2">
-                            <a href="" title="Guarda il video del viaggiatore">
-                                <img src="img/fara_bg_3.jpg" alt="Viaggiatore #1">
+                            <a href="#open-vid" title="Guarda il video del viaggiatore">
+                                <img src="img/thumb_viaggiatore.jpg" alt="Viaggiatore #1">
                             </a>
                         </div>
                         <div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg">                            
@@ -198,7 +198,7 @@
                     <div class="columns mb-2">
                         <div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2">
                             <a href="" title="Guarda il video">
-                                <img src="img/Thumbnail_Antonio.jpg" alt="I nobili di Fara">
+                                <img src="img/thumb_nobili.jpg" alt="I nobili di Fara">
                             </a>
                         </div>
                         <div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg">
@@ -235,6 +235,25 @@
                         </div>
                     </div>
             </section>
+            <div class="modal modal-lg modal-fullheight" id="mod-vid">
+                <a href="#close" class="modal-overlay" aria-label="Close"></a>
+                <div class="modal-container">
+                    <div class="modal-header">
+                        <a href="#close" class="btn btn-clear float-right" title="Close" aria-label="Close"></a>
+                    <div class="modal-title h5"></div>
+                </div>
+                <div class="modal-body">
+                    <div class="content" id="mod-cont">
+                        <video controls>
+                            <source src="assets/video/vid_prologo.mp4" type="video/mp4">
+                            Il browser non supporta i video integrati.
+                        </video>
+                    </div>
+                </div>
+                <!-- <div class="modal-footer">
+                </div> -->
+                </div>
+            </div>
         </main>
         <footer class="roboto">
             <p id="copy">&copy; Avviso pubblico Beni Culturali e Turismo POR FESR Lazio 2014-2020</p>
diff --git a/js/ui.js b/js/ui.js
index d48080b..0ccf87c 100644
--- a/js/ui.js
+++ b/js/ui.js
@@ -95,4 +95,42 @@ window.addEventListener('load', () => {
         document.querySelector('.side-nav').classList.add('d-hide');
         document.querySelector('body').classList.remove('opaque');
     })
+})
+/**
+ * Open / close modal for videos
+ * and apply video source
+ */
+window.addEventListener('load', () => {
+    let vidLinks = Array.from(document.querySelectorAll('a[href="#open-vid"]'));
+    let source = document.querySelector('source');
+    let video = source.parentNode;
+    /**
+     * Dynamically change video source
+     * Note naming convention...
+     */
+    vidLinks.forEach(a => {
+        let aNodes = a.childNodes;
+        
+        a.addEventListener('click', () => {
+            aNodes.forEach(n => {
+                if (n.src) {
+                    let vStr = n.src
+                    .substr(n.src.lastIndexOf('/')+1, n.src.length)
+                    .replace(/thumb_(.*)\.\w+$/, 'vid_$1.mp4');
+                    
+                    source.src = `assets/video/${vStr}`;
+                    
+                    video.load();
+                }
+            });
+            
+            document.querySelector('#mod-vid').classList.add('active');
+        });
+    });
+
+    let close = document.querySelectorAll('#mod-vid a[href="#close"]')[1];
+
+    close.addEventListener('click', () => {
+        document.querySelector('#mod-vid').classList.remove('active');
+    });
 })
\ No newline at end of file