added fancybox modal to the video player on the front page

diff --git a/css/app.css b/css/app.css
index 84f6434..1f93ecc 100644 (file)
--- a/css/app.css
+++ b/css/app.css
@@ -6607,6 +6607,21 @@ main {
   #content-bulk footer img {
     box-shadow: none; }
 
+.fancybox {
+  display: inline-block;
+  height: 100%;
+  width: 100%; }
+
+.fancybox iframe {
+  z-index: 2; }
+
+.iframe-screen {
+  background: transparent;
+  width: 100%;
+  position: absolute;
+  top: 150px;
+  height: 248px; }
+
 @media only screen and (max-width: 40em) {
   #slideshow {
     height: 270px; } }

diff --git a/front-page.php b/front-page.php
index af55cec..734a635 100644 (file)
--- a/front-page.php
+++ b/front-page.php
@@ -30,8 +30,10 @@
                 <img alt="Downtown Petoskey" src="http://cams.gaslightmedia.com/cameras/images/GLM-Downtown-Medium.jpg?x=1">
             </div>
             <div class="show-for-large-up large-4 columns text-center right">
+               <div class="iframe-screen">                <a href="https://player.vimeo.com/video/128990353" class="fancybox fancybox.iframe" data-fancybox-type="iframe"> </a>
+</div>
                 <h3 class="text-center large-text-left">Featured Video</h3>
-                <iframe src="https://player.vimeo.com/video/128990353" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
+                    <iframe src="https://player.vimeo.com/video/128990353" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
             </div>
             <div class="show-for-medium-down small-11 columns small-centered">
                 <p><a  target="_blank" href="http://cams.gaslightmedia.com/cameras/images/GLM-Downtown-Medium.jpg?x=1">Full Resolution</a> &#9679; <a href="#">Refresh Image</a> (image updates at one minute intervals) </p>

diff --git a/js/app.js b/js/app.js
index 7318ff1..2d7e1d0 100644 (file)
--- a/js/app.js
+++ b/js/app.js
@@ -30,8 +30,18 @@ $(document).ready(function () {
         //console.log('ul = ' + menuImg);
         //console.log('menu-id = ' + menuNum);
     });    
-    $("#second-row iframe").fancybox({
-
+//    $("#second-row iframe").fancybox({
+//
+//         helpers: {
+//            overlay: { locked: false },
+//             title: { type: 'inside'},
+//        },
+//        afterLoad: function(){
+//            this.title = $(this.element).find('img').attr('alt');
+//        }
+//    });
+    $(".fancybox").fancybox({
+        type: 'iframe',
          helpers: {
             overlay: { locked: false },
              title: { type: 'inside'},

diff --git a/js/custom/pageSetup.js b/js/custom/pageSetup.js
index 1d0e475..2c77d7d 100644 (file)
--- a/js/custom/pageSetup.js
+++ b/js/custom/pageSetup.js
@@ -21,8 +21,18 @@ $(document).ready(function () {
         //console.log('ul = ' + menuImg);
         //console.log('menu-id = ' + menuNum);
     });    
-    $("#second-row iframe").fancybox({
-
+//    $("#second-row iframe").fancybox({
+//
+//         helpers: {
+//            overlay: { locked: false },
+//             title: { type: 'inside'},
+//        },
+//        afterLoad: function(){
+//            this.title = $(this.element).find('img').attr('alt');
+//        }
+//    });
+    $(".fancybox").fancybox({
+        type: 'iframe',
          helpers: {
             overlay: { locked: false },
              title: { type: 'inside'},

diff --git a/scss/_main.scss b/scss/_main.scss
index bbf72c3..370bcad 100644 (file)
--- a/scss/_main.scss
+++ b/scss/_main.scss
@@ -175,3 +175,17 @@ main {
         }
     }
 }
+.fancybox{
+    display: inline-block;
+    height: 100%;
+    width: 100%;
+}
+
+.fancybox iframe { z-index: 2; }
+.iframe-screen{
+    background:transparent;
+    width:100%;
+    position: absolute;
+    top: 150px;
+    height: 248px;
+}