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

includes/index.tmpl

Index: includes/index.tmpl
===================================================================
--- a/includes/index.tmpl
+++ b/includes/index.tmpl
@@ -123,17 +123,27 @@
     <div class="warning-platform chrome">{{"It appears that you are using Google Chrome."|translate("s30")}} <a href="chrome">{{"Switch to Adblock Plus for Chrome."|translate("s31")}}</a></div>
     <div class="warning-platform android">{{"It appears that you are using Android."|translate("s32")}} <a href="android">{{"Switch to Adblock Plus for Android."|translate("s33")}}</a></div>
     <div class="warning-platform opera">{{"It appears that you are using Opera."|translate("s34")}} <a href="opera">{{"Switch to Adblock Plus for Opera."|translate("s35")}}</a></div>
     <div class="warning-platform internet-explorer">{{"It appears that you are using Internet Explorer."|translate("s36")}} <a href="internet-explorer">{{"Switch to Adblock Plus for Internet Explorer."|translate("s37")}}</a></div>
     <div class="warning-platform safari">{{"It appears that you are using Safari."|translate("s38")}} <a href="safari">{{"Switch to Adblock Plus for Safari."|translate("s39")}}</a></div>
     <div class="warning-platform yandex-browser">{{"It appears that you are using Yandex Browser."|translate("s40")}} <a href="yandex-browser">{{"Switch to Adblock Plus for Yandex Browser."|translate("s41")}}</a></div>
     <div class="warning-platform maxthon">{{"It appears that you are using Maxthon."|translate("s42")}} <a href="maxthon">{{"Switch to Adblock Plus for Maxthon."|translate("s43")}}</a></div>
   </div>
-  <iframe frameborder="0" height="285" id="video" itemprop="video" src="//www.youtube-nocookie.com/embed/pVYtzF5SemU?html5=1&amp;autohide=1&amp;enablejsapi=1&amp;controls=2&amp;fs=1&amp;modestbranding=1&amp;rel=0&amp;showinfo=0&amp;theme=light" width="520" allowfullscreen></iframe>
+
+  <div id="video-container">
+    <a id="video" target="_blank" href="https://www.youtube-nocookie.com/embed/pVYtzF5SemU?html5=1&amp;autohide=1&amp;enablejsapi=1&amp;controls=2&amp;fs=1&amp;modestbranding=1&amp;rel=0&amp;showinfo=0&amp;theme=light&amp;autoplay=1">
+      <img id="video-thumbnail" src="/img/video-thumbnail.jpg" alt="{{ "Introduction to Adblock Plus video thumbnail" | translate("video-alt-text") }}">
+      <img id="video-play" src="/img/video-external.png" alt="{{ "Play Video" | translate("video-play-alt-text") }}">
+    </a>
+    <p id="video-disclaimer">
+      {{ "Click to play this video. Please note that this video is hosted by YouTube. When this video is played, some personal data is transferred to YouTube. For more information, please review YouTube's <a href=\"​https://www.google.com/intl/en/policies/privacy/\" target=\"_blank\">privacy policy</a>." | translate("video-disclaimer") }}
+    </p>
+  </div>
+  
   <img id="maxthon-instruction" src="/img/maxthon-instruction.png" alt="{{"Activate Adblock Plus in Maxthon"|translate("maxthon-instruction")}}">
   <img id="edge-teaser" src="/img/edge_teaser.png" alt="{{"Comming soon image of Adblock Plus for Microsoft Edge"|translate("edge-teaser")}}" />
 </div>
 
 <div id="key-facts">
   <section class="first">
     <div class="sprite" id="facts-open-source"></div>
     <h1>{{"Open Source"|translate("s44")}}</h1>