Replace AJAX video popup with Featherlight and handle responsive scaling and autoplay...

diff --git a/framework/application/controllers/AjaxpopupController.php b/framework/application/controllers/AjaxpopupController.php
index 0f3c556152a54e63efe8c3b0bb699231655883a8..a7c183ee0133b15667770d4c5af53ad19959715b 100644 (file)
--- a/framework/application/controllers/AjaxpopupController.php
+++ b/framework/application/controllers/AjaxpopupController.php
@@ -8,10 +8,4 @@ class AjaxpopupController extends CubeIT_Controller_AjaxpopupController {
         return $this->view->quoteForm('requestQuotePopup'); // Different ID for popup form so it doesn't conflict with contact page form
     }
 
-    public function video($ID) {
-        $this->setPopupMaxWidth('1440');
-        $this->setPopupWidth('90%');
-        return $this->view->videoWeb($ID, '100%', 'auto', ['autoplay' => 1]);
-    }
-
 }
\ No newline at end of file

diff --git a/framework/application/views/scripts/templates/fonctionnalites.phtml b/framework/application/views/scripts/templates/fonctionnalites.phtml
index df92201ad98513846b4947db0ae9929a8f8a0aab..98d49963808a115166a6087db79a7adec1b95274 100644 (file)
--- a/framework/application/views/scripts/templates/fonctionnalites.phtml
+++ b/framework/application/views/scripts/templates/fonctionnalites.phtml
@@ -1,11 +1,14 @@
 <?php\r
 \r
+$this->headScript()->addFeatherlight();\r
 $this->headScript()->addScriptAndStyle('410-features');\r
 \r
-$videoLink = '/ajaxpopup/video/'. $this->video;\r
-\r
-$extraContent  = $this->linkPopup($this->video_button_text, $videoLink, ['class' => 'features-video-button']);\r
-$extraContent .= $this->linkPopup('', $videoLink, ['class' => 'features-video', 'width' => '1200']);\r
+// Todo: replace with link to demo fluidbook and add fields to CMS\r
+//$extraContent  = $this->linkPopup($this->video_button_text, $videoLink, ['class' => 'features-video-button']);\r
+$extraContent  = $this->link('', '#', ['class' => 'features-video', 'data-featherlight' => '#introVideo', 'data-featherlight-after-open' => 'playVideo()']);\r
+$extraContent .= '<div class="lightbox" id="introVideo">';\r
+$extraContent .= $this->videoWeb($this->video);\r
+$extraContent .= '</div>'; // .lightbox\r
 \r
 $res  = $this->introBlock($this->intro, $extraContent);\r
 \r

diff --git a/js/410-features.js b/js/410-features.js
index c50f6fca2de9ed1a1cdc280221fe670de3ec921e..33ea7c422683204e38dea397a71608e7f227ca64 100644 (file)
--- a/js/410-features.js
+++ b/js/410-features.js
@@ -57,4 +57,12 @@ function resizeFeatureBlocks() {
     containerWidth = Math.floor($('main').width() * 0.9 / cols) * cols;
 
     $('.feature-blocks').width(containerWidth);
+}
+
+// Switch the video URL to autoplay so the video starts playing...
+// This function is called when the featherlight opens
+function playVideo() {
+    var video = $('.featherlight #introVideo iframe');
+
+    video[0].src = video[0].src.replace('autoplay=0','autoplay=1');
 }
\ No newline at end of file

diff --git a/less/410-features.less b/less/410-features.less
index 0ba824ca1fc619467c1d3a7d8761a2ee331f972c..a1618ffb66d533726807c5e2891e489e506f680e 100644 (file)
--- a/less/410-features.less
+++ b/less/410-features.less
@@ -17,6 +17,49 @@
   margin-top: 50px;
 }
 
+// Featherlight modifications to make responsive iframes work
+.featherlight-iframe {
+  &:before {
+    display: none; // This element doesn't seem necessary and really messes up the display
+  }
+
+  .featherlight-content {
+    display: block; // Normally it is set to inline-block but then the iframe can't be scaled by percentage
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    overflow: visible; // So close icon can sit outside the box
+    padding: 0 !important;
+    margin: 0 5% !important;
+    border: none !important;
+  }
+
+  .featherlight-close-icon {
+    background-color: transparent;
+    color: #fff;
+    font-size: 20px;
+    top: -27px;
+    right: -4px;
+  }
+}
+
+// Lightbox for the video with intrinsic ratio
+.lightbox {
+  display: none;
+  position: relative;
+  padding-bottom: percentage(9/16); // 16:9 aspect ratio
+
+  iframe {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+}
+
 .features-video {
   display: block;
   position: absolute;