From 8102192410ea0910c2cb88ff8984341626eb7b12 Mon Sep 17 00:00:00 2001
From: nyanloutre <paul.trehiou@protonmail.com>
Date: Mon, 24 Jul 2017 17:09:52 +0200
Subject: [PATCH] Sketchfab iframe

---
 index.html | 39 +++++++++++++++++++++++++++++++++++----
 1 file changed, 35 insertions(+), 4 deletions(-)

diff --git a/index.html b/index.html
index 2ed21df..a477ae0 100644
--- a/index.html
+++ b/index.html
@@ -120,10 +120,8 @@
                     <source src="video/portfolio/1.webm" type="video/webm">
                 </video>
             </div>
-            <div class="video-portfolio col-lg-4 col-sm-6">
-                <video loop muted poster="img/portfolio/1.jpg">
-                    <source src="video/portfolio/1.webm" type="video/webm">
-                </video>
+            <div class="video-portfolio clickable col-lg-4 col-sm-6" data-toggle="modal" data-target="#sketchFabModal" data-sketchfabid="7507e61126754169937a24858981b185" data-comment="Une carotte">
+                <img src="img/portfolio/1.jpg" />
             </div>
             <div class="video-portfolio col-lg-4 col-sm-6">
                 <video loop muted poster="img/portfolio/1.jpg">
@@ -201,6 +199,25 @@
         </div>
     </div>
     
+    <div class="modal fade" id="sketchFabModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
+        <div class="modal-dialog modal-lg" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                        <span aria-hidden="true">&times;</span>
+                    </button>
+                </div>
+                <div class="modal-body">
+                    <div class="embed-responsive embed-responsive-16by9">
+                        <iframe allowvr allowfullscreen mozallowfullscreen="true" webkitallowfullscreen="true" onmousewheel=""></iframe>
+                    </div>
+                    <hr>
+                    <p></p>
+                </div>
+            </div>
+        </div>
+    </div>
+    
     <!-- Bootstrap core JavaScript -->
     <script src="vendor/jquery/jquery.min.js"></script>
     <script src="vendor/tether/tether.min.js"></script>
@@ -309,6 +326,20 @@
             $(this).find('.modal-body iframe')[0].src = "";
             $(this).find('.modal-body p')[0].innerHTML = "";
         });
+                
+        $('#sketchFabModal').on('show.bs.modal', function (event) {
+            masthead_video_mute(true);
+            var button = $(event.relatedTarget);
+            var sketchfab_id = button.data('sketchfabid');
+            var comment = button.data('comment');
+            var modal = $(this);
+            modal.find('.modal-body iframe')[0].src = 'https://sketchfab.com/models/' + sketchfab_id + '/embed';
+            modal.find('.modal-body p')[0].innerHTML = comment;
+        });
+        $('#sketchFabModal').on('hidden.bs.modal', function () {
+            $(this).find('.modal-body iframe')[0].src = "";
+            $(this).find('.modal-body p')[0].innerHTML = "";
+        });
     </script>
 
 </body>