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

includes/index.tmpl

 title=Adblock Plus - Surf the web without annoying ads!
 noheading=True
 localefile=index
 
 {#
  # This file is part of the Adblock Plus website,
  # Copyright (C) 2006-present eyeo GmbH
  #
  # Adblock Plus is free software: you can redistribute it and/or modify
  # it under the terms of the GNU General Public License version 3 as
@@ skipping 110 matching lines @@
     </div>
     <div class="warning-platform firefox">{{"It appears that you are using Mozilla Firefox."|translate("s28")}} <a href="firefox">{{"Switch to Adblock Plus for Firefox."|translate("s29")}}</a></div>
     <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 src="/img/video-thumbnail.png" alt="{{ "Introduction to Adblock Plus video thumbnail" | translate("video-alt-text") }}">
+    </a>
+    <p id="video-disclaimer">

[ire, 2017/10/10 18:13:36]

Users (currently) can't click directly on the text here to load/play the video.
I can add a link around all the text (besides the privacy policy) that would
link to the video (or trigger the loading/playing), but I feel that would be
unsemantic. What do you think?

[juliandoucette, 2017/10/11 15:52:37]

I think that there is supposed to be a play button above the overlay above this
text? (The new abp.org design play button.)

+      {{ "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>
     <p>
         {{"Adblock Plus is an open source project.\n      <a href=\"contribute\">Join us!</a>"|translate("s45")}}
@@ skipping 198 matching lines @@
       </p>
 
       <p>
       {{"Adblock Plus is developed by the open source community and free to use. Used on more than 100 million devices, it’s one of the most popular extensions ever."|translate("s96")}}
       </p>
     </div>
   </div>
 </section>
 
 <script src="/js/index.js"></script>