Load Youtube iframe on click only

(Increases performances and offers better privacy)

_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;
@@ -2327,10 +2356,9 @@ h2 .rssicon{
 	.press-quotes p{
 		width:auto;
 	}
-	.mainvideo{
+	.mainvideo>div{
 		position:relative;
 		padding-bottom:56.25%;
-		padding-top:30px;
 		height:0;
 		overflow:hidden;
 	}
@@ -2341,6 +2369,9 @@ h2 .rssicon{
 		width:100%;
 		height:100%;
 	}
+	.mainvideo img{
+		height:auto;
+	}
 	.mainlist,
 	.mainlist>div{
 		width:auto;

_templates/index.html

@@ -5,8 +5,26 @@
 layout: base
 id: index
 ---
+<script>
+function loadMainVideo(e) {
+var p = document.getElementById('mainvideo'),
+    t = p.getElementsByTagName('DIV')[0],
+    nd = document.createElement('IFRAME');
+nd.src = '//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 %}';
+nd.setAttribute('frameborder', 0);
+nd.setAttribute('allowfullscreen', true);
+t.innerHTML = '';
+t.appendChild(nd);
+removeEvent(p, loadMainVideo);
+cancelEvent(e);
+}
+</script>
 <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" id="mainvideo" onclick="loadMainVideo(event);"><div>
+  <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

@@ -7,8 +7,26 @@
 id: index
 title: Bitcoin
 ---
+<script>
+function loadMainVideo(e) {
+var p = document.getElementById('mainvideo'),
+    t = p.getElementsByTagName('DIV')[0],
+    nd = document.createElement('IFRAME');
+nd.src = '//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 %}';
+nd.setAttribute('frameborder', 0);
+nd.setAttribute('allowfullscreen', true);
+t.innerHTML = '';
+t.appendChild(nd);
+removeEvent(p, loadMainVideo);
+cancelEvent(e);
+}
+</script>
 <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" id="mainvideo" onclick="loadMainVideo(event);"><div>
+  <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>