[git] gnupg-doc - branch, preview, updated. b69f055cb8abaea19e60ca47e07d25b98712b6ef

[by Marcus Brinkmann]

This is an automated email from the git hooks/post-receive script. It was
generated because a ref change was pushed to the repository containing
the project "The GnuPG website and other docs".

The branch, preview has been updated
       via  b69f055cb8abaea19e60ca47e07d25b98712b6ef (commit)
      from  8a7b3d1be6728601722ba6ac1da3642de970b4bf (commit)

Those revisions listed above that are new to this repository have
not appeared on any other notification email; so we list those
revisions in full, below.

- Log -----------------------------------------------------------------
commit b69f055cb8abaea19e60ca47e07d25b98712b6ef
Author: Marcus Brinkmann <marcus.brinkmann at ruhr-uni-bochum.de>
Date:   Tue May 16 18:10:51 2017 +0200

    web: Hide youtube js behind click-through wrapper.

diff --git a/web/donate/index.org b/web/donate/index.org
index e7d3fcf..7cecc67 100644
--- a/web/donate/index.org
+++ b/web/donate/index.org
@@ -58,9 +58,10 @@
 	  <h1>GnuPG Fundraising Rally</h1>
 	</div>
 	<div class="col-xs-12 col-lg-8">
-          <div class="embed-responsive embed-responsive-16by9 camp-video">
-            <iframe class="embed-responsive-item" allowfullscreen="0" src="https://www.youtube.com/embed/yB3V1YP8cKw"></iframe>
-          </div>
+	  <div class="embed-responsive embed-responsive-16by9 camp-video" data-embed="yB3V1YP8cKw">
+	    <img src="http://i0.kym-cdn.com/photos/images/facebook/001/217/711/afd.jpg_large">
+	    <div class="play-button"></div>
+	    <div class="video-text">Click to start the video (requires JavaScript from YouTube).</div>
 	</div>
 
 	<div class="col-xs-12 hidden-lg">
@@ -157,9 +158,10 @@
 	  <h2>Video of the Day: Rick Astley <small>GnuPG will never gonna give you up</small></h2>
 	  <div class="row">
 	    <div class="col-lg-10 col-lg-offset-0">
-	      <div class="embed-responsive embed-responsive-16by9">
-		<iframe class="embed-responsive-item" allowfullscreen="0" src="https://www.youtube.com/embed/DLzxrzFCyOs"></iframe>
-	      </div>
+	      <div class="embed-responsive embed-responsive-16by9 camp-video" data-embed="DLzxrzFCyOs">
+		<img src="http://i0.kym-cdn.com/photos/images/facebook/001/217/711/afd.jpg_large">
+		<div class="play-button"></div>
+		<div class="video-text">Click to start the video (requires JavaScript from YouTube).</div>
 	    </div>
 	  </div>
 	</div>
diff --git a/web/share/campaign/campaign.css b/web/share/campaign/campaign.css
index 21eaaa8..797a34e 100644
--- a/web/share/campaign/campaign.css
+++ b/web/share/campaign/campaign.css
@@ -187,3 +187,70 @@ h4 small {
   white-space: nowrap;
   overflow: hidden;
 }
+.camp-video {
+  background-color: #000;
+  position: relative;
+  overflow: hidden;
+  cursor: pointer;
+}
+.camp-video img {
+  width: 100%;
+  left: 0;
+  opacity: 0.7;
+}
+.camp-video .play-button {
+  width: 80px;
+  height: 50px;
+  box-shadow: 0 0 30px rgba(0, 0, 0, 0.6);
+  z-index: 1;
+  opacity: 0.8;
+  border-radius: 6px;
+}
+.camp-video .play-button {
+  transition: background-color 0.2s ease;
+  background-color: #333;
+}
+.camp-video:hover .play-button,
+.touch .play-button {
+  transition: background-color 0.2s ease;
+  background-color: #f00;
+}
+.camp-video .play-button:before {
+  content: "";
+  border-style: solid;
+  border-width: 10px 0 10px 20.0px;
+  border-color: transparent transparent transparent #fff;
+}
+.camp-video img,
+.youtube .play-button {
+  cursor: pointer;
+}
+.camp-video img,
+.camp-video iframe,
+.camp-video .play-button,
+.camp-video .video-text,
+.camp-video .play-button:before {
+  position: absolute;
+}
+.camp-video .play-button,
+.camp-video .play-button:before {
+  top: 50%;
+  left: 50%;
+  transform: translate3d(-50%, -50%, 0);
+}
+.camp-video iframe {
+  height: 100%;
+  width: 100%;
+  top: 0;
+  left: 0;
+}
+.camp-video .video-text {
+  width: 100%;
+  top: 20%;
+  text-align: center;
+  opacity: 1.0;
+  color: #fff;
+  padding-left: 20px;
+  padding-right: 20px;
+  font-size: 130%;
+}
diff --git a/web/share/campaign/campaign.js b/web/share/campaign/campaign.js
index b3395ff..fd3c23c 100644
--- a/web/share/campaign/campaign.js
+++ b/web/share/campaign/campaign.js
@@ -41,3 +41,17 @@ $(document).ready(function() {
 $(document).ready(function() {
     $('.carousel').bcSwipe({ threshold: 50 });
 });
+
+
+$(document).ready(function() {
+    /* For the video preview, we use this for devices without hover events.  */
+    if ("ontouchstart" in document.documentElement) {
+	$("body").addClass("touch");
+    }
+
+    /* Click handler for all videos.  */
+    $(".camp-video").one("click", function() {
+	let yt_id = $(this).data("embed");
+	$(this).html('<iframe class="embed-responsive-item" allowfullscreen src="https://www.youtube.com/embed/' + yt_id + '?autoplay=1&rel=0"></iframe>');
+    });
+});

-----------------------------------------------------------------------

Summary of changes:
 web/donate/index.org            | 14 +++++----
 web/share/campaign/campaign.css | 67 +++++++++++++++++++++++++++++++++++++++++
 web/share/campaign/campaign.js  | 14 +++++++++
 3 files changed, 89 insertions(+), 6 deletions(-)


hooks/post-receive
-- 
The GnuPG website and other docs
http://git.gnupg.org