Merge branch 'youtubeondemand'

Makefile

@@ -250,6 +250,6 @@ check-for-subheading-anchors:
 ## Ensure all subheadings on the site have anchors so the Javascript
 ## function addAnchorLinks() can add anchor link affordance to each
 ## subhead
-	$S grep -r -L 'Note: this file exempt from check-for-subheading-anchors check' _site/ \
+	$S grep -r -i --include \*.html -L 'Note: this file exempt from check-for-subheading-anchors check' _site/ \
 	  | xargs grep '<h[23456]' \
 	  | grep -v '<h[23456][^>]* id=' | eval $(ERROR_ON_OUTPUT)

_less/screen.less

@@ -434,10 +434,39 @@ table td,table th{
 	color:#7b7c7c;
 	margin:20px auto 45px auto;
 }
-.mainvideo iframe{
+.mainvideo{
+	position:relative;
+	margin:auto;
+	max-width:640px;
+	max-height:360px;
+}
+.mainvideo iframe,
+.mainvideo img{
 	width:640px;
 	height:360px;
 }
+.mainvideo div div{
+	cursor:pointer;
+	position:absolute;
+	top:0;
+	left:0;
+	right:0;
+	bottom:0;
+}
+.mainvideo .mainvideoicon{
+	display:block;
+	background:url(/img/icons/video_play.svg) center center no-repeat;
+}
+.mainvideo .mainvideoiconhover{
+	display:none;
+	background:url(/img/icons/video_play_hover.svg) center center no-repeat;
+}
+.mainvideo:hover .mainvideoicon{
+	display:none;
+}
+.mainvideo:hover .mainvideoiconhover{
+	display:block;
+}
 .mainlist{
 	font-size:125%;
 	width:760px;
@@ -2339,10 +2368,9 @@ h2 .rssicon{
 	.press-quotes p{
 		width:auto;
 	}
-	.mainvideo{
+	.mainvideo>div{
 		position:relative;
 		padding-bottom:56.25%;
-		padding-top:30px;
 		height:0;
 		overflow:hidden;
 	}
@@ -2353,6 +2381,9 @@ h2 .rssicon{
 		width:100%;
 		height:100%;
 	}
+	.mainvideo img{
+		height:auto;
+	}
 	.mainlist,
 	.mainlist>div{
 		width:auto;

_templates/index.html

@@ -6,7 +6,11 @@ layout: base
 id: index
 ---
 <p class="mainsummary">{% translate listintro %}</p>
-<div class="mainvideo"><iframe src="//www.youtube.com/embed/Gc2en3nHxA4?rel=0&amp;showinfo=0&amp;wmode=opaque&amp;{% if page.lang != 'en' %}cc_load_policy=1&amp;hl={{ page.lang }}&amp;cc_lang_pref={{ page.lang }}{% endif %}" frameborder="0" allowfullscreen></iframe></div>
+<div class="mainvideo"><div onclick="loadYoutubeVideo(event);" data-youtubeurl="//www.youtube.com/embed/Gc2en3nHxA4?rel=0&amp;showinfo=0&amp;wmode=opaque&amp;autoplay=1{% if page.lang != 'en' %}&amp;cc_load_policy=1&amp;hl={{ page.lang }}&amp;cc_lang_pref={{ page.lang }}{% endif %}">
+  <img src="/img/video/video_wuc.jpg" alt="Youtube video">
+  <div class="mainvideoicon"></div>
+  <div class="mainvideoiconhover"></div>
+</div></div>
 <div class="mainlist">
   <div><div><img src="/img/icons/main_ico_instant.svg" alt="Icon"><div>{% translate list1 %}</div></div></div>
   <div><div><img src="/img/icons/main_ico_worldwide.svg" alt="Icon"><div>{% translate list2 %}</div></div></div>

img/video/COPYING

@@ -0,0 +1,3 @@
+The files inside this folder may be subjected to copyright restrictions. The
+use of these materials is not permitted unless otherwise specified by their
+copyright owner.

index.html

@@ -8,7 +8,11 @@ id: index
 title: Bitcoin
 ---
 <p class="mainsummary">{% translate listintro %}</p>
-<div class="mainvideo"><iframe src="//www.youtube.com/embed/Gc2en3nHxA4?rel=0&amp;showinfo=0&amp;wmode=opaque{% if page.lang != 'en' %}&amp;cc_load_policy=1&amp;hl={{ page.lang }}&amp;cc_lang_pref={{ page.lang }}{% endif %}" frameborder="0" allowfullscreen></iframe></div>
+<div class="mainvideo"><div onclick="loadYoutubeVideo(event);" data-youtubeurl="//www.youtube.com/embed/Gc2en3nHxA4?rel=0&amp;showinfo=0&amp;wmode=opaque&amp;autoplay=1{% if page.lang != 'en' %}&amp;cc_load_policy=1&amp;hl={{ page.lang }}&amp;cc_lang_pref={{ page.lang }}{% endif %}">
+  <img src="/img/video/video_wuc.jpg" alt="Youtube video">
+  <div class="mainvideoicon"></div>
+  <div class="mainvideoiconhover"></div>
+</div></div>
 <div class="mainlist">
   <div><div><img src="/img/icons/main_ico_instant.svg" alt="Icon"><div>{% translate list1 %}</div></div></div>
   <div><div><img src="/img/icons/main_ico_worldwide.svg" alt="Icon"><div>{% translate list2 %}</div></div></div>

js/main.js

@@ -115,6 +115,19 @@ for (var i = 0, n = domPrefixes.length; i < n; i++) {
 return false;
 }
 
+function loadYoutubeVideo(e) {
+// Load Youtube video on target node on click.
+var t = getEventTarget(e),
+    nd = document.createElement('IFRAME');
+while (t.getAttribute('data-youtubeurl') === null || t.getAttribute('data-youtubeurl') === '') t = t.parentNode;
+nd.src = t.getAttribute('data-youtubeurl');
+nd.setAttribute('frameborder', 0);
+nd.setAttribute('allowfullscreen', true);
+t.innerHTML = '';
+t.appendChild(nd);
+t.onclick = '';
+}
+
 function boxShow(e) {
 // Display the box content when the user click a box on the "Secure your wallet" page.
 var p = t = getEventTarget(e);