diff --git a/Makefile b/Makefile index 7775a841..fc24cad2 100644 --- a/Makefile +++ b/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 ']* id=' | eval $(ERROR_ON_OUTPUT) diff --git a/_less/screen.less b/_less/screen.less index 6531ccfe..cc195916 100644 --- a/_less/screen.less +++ b/_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; diff --git a/_templates/index.html b/_templates/index.html index b53f16a5..941e38f5 100755 --- a/_templates/index.html +++ b/_templates/index.html @@ -6,7 +6,11 @@ layout: base id: index ---

{% translate listintro %}

-
+
+ Youtube video +
+
+
Icon
{% translate list1 %}
Icon
{% translate list2 %}
diff --git a/img/icons/video_play.png b/img/icons/video_play.png new file mode 100644 index 00000000..42f3eebd Binary files /dev/null and b/img/icons/video_play.png differ diff --git a/img/icons/video_play.svg b/img/icons/video_play.svg new file mode 100644 index 00000000..5fbd024d --- /dev/null +++ b/img/icons/video_play.svg @@ -0,0 +1,16 @@ + + + + + + image/svg+xml + + + + + + + + + + diff --git a/img/icons/video_play_hover.png b/img/icons/video_play_hover.png new file mode 100644 index 00000000..28f4dade Binary files /dev/null and b/img/icons/video_play_hover.png differ diff --git a/img/icons/video_play_hover.svg b/img/icons/video_play_hover.svg new file mode 100644 index 00000000..5f7b70cd --- /dev/null +++ b/img/icons/video_play_hover.svg @@ -0,0 +1,16 @@ + + + + + + image/svg+xml + + + + + + + + + + diff --git a/img/video/COPYING b/img/video/COPYING new file mode 100644 index 00000000..fa4052e3 --- /dev/null +++ b/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. diff --git a/img/video/video_wuc.jpg b/img/video/video_wuc.jpg new file mode 100644 index 00000000..119e2b82 Binary files /dev/null and b/img/video/video_wuc.jpg differ diff --git a/index.html b/index.html index 714719fb..18a7fe37 100755 --- a/index.html +++ b/index.html @@ -8,7 +8,11 @@ id: index title: Bitcoin ---

{% translate listintro %}

-
+
+ Youtube video +
+
+
Icon
{% translate list1 %}
Icon
{% translate list2 %}
diff --git a/js/main.js b/js/main.js index 139e365b..3ff90c95 100644 --- a/js/main.js +++ b/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);