Issue 5727 - Implement non-embedded homepage video on abp.org

static/js/index.js

Index: static/js/index.js
===================================================================
--- a/static/js/index.js
+++ b/static/js/index.js
@@ -1,10 +1,12 @@
 (function()
 {
+  document.documentElement.className = "js";
+
   var visibleTab;
   var container = document.getElementById("more-container");
 
   window.toggleMore = function()
   {
     if (container.className == "hidden")
       container.className = visibleTab || getDefaultTab();
     else
@@ -20,9 +22,56 @@
 
   function getDefaultTab()
   {
     var content = document.getElementById("content");
     var ua = content.className.match(/ua\-([^\s]+)/);
     visibleTab = ua && ua[1] || "firefox";
     return visibleTab;
   }
+
+  // Change overlay icon on #video to play icon

[ire, 2017/10/12 19:48:25]

I thought it would make more sense to change the url with JavaScript, rather
than having to show/hide and use <noscript> to show the relevant images.

[juliandoucette, 2017/10/13 12:20:11]

Acknowledged.

+  document
+    .getElementById("video-play")
+    .setAttribute("src", "/img/video-play.png");
+
+  // Save time user clicked to show video disclaimer
+  var timeClickedVideo;
+
+  function changeImageToVideo(event)
+  {
+    event.preventDefault();
+    
+    var videoContainer = document.getElementById("video-container");
+
+    if (videoContainer.className == "show-disclaimer")
+    {
+      // Enfore 600ms delay
+      var currentTime = new Date().getTime();
+      if (currentTime - timeClickedVideo < 600) return;
+
+      var image = this;
+      
+      var video = document.createElement("iframe");
+      video.id = "video";
+      video.setAttribute("frameborder", "0");
+      video.setAttribute("height", "285");
+      video.setAttribute("width", "520");
+      video.setAttribute("itemprop", "video");
+      video.setAttribute("allowfullscreen", "allowfullscreen");
+      video.setAttribute("src", image.getAttribute("href"));
+      
+      image.parentNode.replaceChild(video, image);
+
+      videoContainer.className = "";
+    }
+    else
+    {
+      videoContainer.className = "show-disclaimer";
+      timeClickedVideo = new Date().getTime();
+    }
+  }
+
+  document
+    .getElementById("video")
+    .addEventListener("click", changeImageToVideo);
+
 })();