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/icons/video_play.svg

@@ -0,0 +1,16 @@
+<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" width="96" height="96" id="svg2" version="1.1" inkscape:version="0.91" sodipodi:docname="video_play.svg" inkscape:export-filename="/media/X/bitcoin.org/current/img/icons/video_play.png" inkscape:export-xdpi="90" inkscape:export-ydpi="90">
+  <metadata id="metadata14">
+    <rdf:RDF>
+      <cc:Work rdf:about="">
+        <dc:format>
+          image/svg+xml
+        </dc:format>
+        <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs id="defs12"/>
+  <sodipodi:namedview pagecolor="#ffffff" bordercolor="#666666" borderopacity="1" objecttolerance="10" gridtolerance="10" guidetolerance="10" inkscape:pageopacity="0" inkscape:pageshadow="2" inkscape:window-width="1615" inkscape:window-height="1026" id="namedview10" showgrid="false" inkscape:zoom="7.38" inkscape:cx="20.95" inkscape:cy="54.7" inkscape:window-x="65" inkscape:window-y="24" inkscape:window-maximized="1" inkscape:current-layer="svg2"/>
+  <rect id="rect4332" width="94" height="66" x="1" y="14" ry="10.48" rx="10.76" style="fill-opacity:0.78;fill:#000"/>
+  <path inkscape:connector-curvature="0" id="path8" d="M35.08 60.93 60.93 48 35.07 35.07Z" clip-path="none" sodipodi:nodetypes="cccc" style="fill:#fff;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-width:2.14;stroke:#fff"/>
+</svg>

img/icons/video_play_hover.svg

@@ -0,0 +1,16 @@
+<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" width="96" height="96" id="svg2" version="1.1" inkscape:version="0.91" sodipodi:docname="video_play_hover.svg" inkscape:export-filename="/media/X/bitcoin.org/current/img/icons/video_play_hover.png" inkscape:export-xdpi="90" inkscape:export-ydpi="90">
+  <metadata id="metadata14">
+    <rdf:RDF>
+      <cc:Work rdf:about="">
+        <dc:format>
+          image/svg+xml
+        </dc:format>
+        <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs id="defs12"/>
+  <sodipodi:namedview pagecolor="#ffffff" bordercolor="#666666" borderopacity="1" objecttolerance="10" gridtolerance="10" guidetolerance="10" inkscape:pageopacity="0" inkscape:pageshadow="2" inkscape:window-width="1615" inkscape:window-height="1026" id="namedview10" showgrid="false" inkscape:zoom="7.38" inkscape:cx="51.12" inkscape:cy="54.7" inkscape:window-x="65" inkscape:window-y="24" inkscape:window-maximized="1" inkscape:current-layer="svg2"/>
+  <rect id="rect4332" width="94" height="66" x="1" y="14" ry="10.48" rx="10.76" inkscape:export-xdpi="90" inkscape:export-ydpi="90" fill="#f7931a"/>
+  <path inkscape:connector-curvature="0" id="path8" d="M35.08 60.93 60.93 48 35.07 35.07Z" clip-path="none" sodipodi:nodetypes="cccc" style="fill:#fff;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-width:2.14;stroke:#fff"/>
+</svg>

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);