web: Hide youtube js behind click-through wrapper.
authorMarcus Brinkmann <marcus.brinkmann@ruhr-uni-bochum.de>
Tue, 16 May 2017 16:10:51 +0000 (18:10 +0200)
committerMarcus Brinkmann <marcus.brinkmann@ruhr-uni-bochum.de>
Tue, 16 May 2017 16:10:59 +0000 (18:10 +0200)
web/donate/index.org
web/share/campaign/campaign.css
web/share/campaign/campaign.js

index e7d3fcf..7cecc67 100644 (file)
          <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">
          <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>
index 21eaaa8..797a34e 100644 (file)
@@ -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%;
+}
index b3395ff..fd3c23c 100644 (file)
@@ -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>');
+    });
+});