joshua/dash-docs
1
0
Fork 0
mirror of https://github.com/seigler/dash-docs synced 2025-07-26 17:26:12 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Load Youtube iframe on click only

Browse source 
(Increases performances and offers better privacy)
This commit is contained in:
Saivann 2015-06-26 12:20:21 -04:00
parent 098fcf1b22
commit 007d45381f
9 changed files with 215 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

37
_less/screen.less
View file

@ -434,10 +434,39 @@ table td,table th{
color:#7b7c7c; color:#7b7c7c;
margin:20px auto 45px auto; margin:20px auto 45px auto;
} }
.mainvideo iframe{ .mainvideo{
position:relative;
margin:auto;
max-width:640px;
max-height:360px;
}
.mainvideo iframe,
.mainvideo img{
width:640px; width:640px;
height:360px; 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{ .mainlist{
font-size:125%; font-size:125%;
width:760px; width:760px;
@ -2327,10 +2356,9 @@ h2 .rssicon{
.press-quotes p{ .press-quotes p{
width:auto; width:auto;
} }
.mainvideo{ .mainvideo>div{
position:relative; position:relative;
padding-bottom:56.25%; padding-bottom:56.25%;
padding-top:30px;
height:0; height:0;
overflow:hidden; overflow:hidden;
} }
@ -2341,6 +2369,9 @@ h2 .rssicon{
width:100%; width:100%;
height:100%; height:100%;
} }
.mainvideo img{
height:auto;
}
.mainlist, .mainlist,
.mainlist>div{ .mainlist>div{
width:auto; width:auto;

20
_templates/index.html
View file

@ -5,8 +5,26 @@
layout: base layout: base
id: index 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> <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 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_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> <div><div><img src="/img/icons/main_ico_worldwide.svg" alt="Icon"><div>{% translate list2 %}</div></div></div>

BIN
img/icons/video_play.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 737 B

69
img/icons/video_play.svg Normal file
View file

@ -0,0 +1,69 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<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 r13725"
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" />
<dc:title></dc:title>
</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.375"
inkscape:cx="20.94773"
inkscape:cy="54.70159"
inkscape:window-x="65"
inkscape:window-y="24"
inkscape:window-maximized="1"
inkscape:current-layer="svg2" />
<rect
style="opacity:1;fill:#000000;fill-opacity:0.78431373;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect4332"
width="94"
height="66"
x="1"
y="14"
ry="10.478285"
rx="10.756036" />
<path
style="fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:2.14342523;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
inkscape:connector-curvature="0"
id="path8"
d="M 35.082112,60.928354 60.928419,47.999998 35.071713,35.071644 Z"
clip-path="none"
sodipodi:nodetypes="cccc" />
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.2 KiB

BIN
img/icons/video_play_hover.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 746 B

71
img/icons/video_play_hover.svg Normal file
View file

@ -0,0 +1,71 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<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 r13725"
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" />
<dc:title></dc:title>
</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.375"
inkscape:cx="51.117222"
inkscape:cy="54.70159"
inkscape:window-x="65"
inkscape:window-y="24"
inkscape:window-maximized="1"
inkscape:current-layer="svg2" />
<rect
style="opacity:1;fill:#f7931a;fill-opacity:1;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect4332"
width="94"
height="66"
x="1"
y="14"
ry="10.478285"
rx="10.756036"
inkscape:export-xdpi="90"
inkscape:export-ydpi="90" />
<path
style="fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:2.14342523;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
inkscape:connector-curvature="0"
id="path8"
d="M 35.082112,60.928354 60.928419,47.999998 35.071713,35.071644 Z"
clip-path="none"
sodipodi:nodetypes="cccc" />
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.3 KiB

3
img/video/COPYING Normal file
View file

@ -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.

BIN
img/video/video_wuc.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 100 KiB

20
index.html
View file

@ -7,8 +7,26 @@ lang: en
id: index id: index
title: Bitcoin 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> <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 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_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> <div><div><img src="/img/icons/main_ico_worldwide.svg" alt="Icon"><div>{% translate list2 %}</div></div></div>