gcg/static-cms
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Tweaked inline video behaviour

Browse Source
This commit is contained in:
Lennart Ziburski 2018-02-27 00:42:32 +01:00
parent 52ba3232be
commit c69e9b47ec
3 changed files with 14 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
website/site/layouts/index.html
View File

@ -16,10 +16,10 @@
</div> </div>
{{ end }} {{ end }}
</div> </div>
<div class="hero-graphic"> <a href="#" class="hero-graphic">
<img src="/img/screenshot-editor.jpg" class="responsive"/> <img src="/img/screenshot-editor.jpg" class="responsive"/>
<a class="hero-videolink" href="#">&#x25b6; Watch how to get started in just over 2 minutes</a> <span class="hero-videolink">&#x25b6; Watch how to get started in just over 2 minutes</span>
</div> </a>
</div> </div>
</section> </section>

12
website/src/css/imports/hero.css
View File

@ -80,7 +80,7 @@
box-shadow: 0 10px 30px 0 rgba(0,0,0,0.15), 0 3px 9px 0 rgba(0,0,0,0.30); box-shadow: 0 10px 30px 0 rgba(0,0,0,0.15), 0 3px 9px 0 rgba(0,0,0,0.30);
} }
a.hero-videolink { .hero-videolink {
display: block; display: block;
text-align: center; text-align: center;
margin-top: $micro; margin-top: $micro;
@ -90,11 +90,17 @@
color: white; color: white;
background-color: rgba(255,255,255,0.1); background-color: rgba(255,255,255,0.1);
border-radius: $borderRadius; border-radius: $borderRadius;
transition: 0.1s;
} }
a.hero-videolink:hover { }
.hero-graphic:hover {
.hero-videolink {
background-color: rgba(255,255,255,0.2); background-color: rgba(255,255,255,0.2);
transform: scale(1.03);
} }
a.hero-videolink:active { }
.hero-graphic:active {
.hero-videolink {
background-color: rgba(255,255,255,0.4); background-color: rgba(255,255,255,0.4);
} }
} }

4
website/src/js/app.js
View File

@ -127,7 +127,7 @@ eventInfoLoad();
// Load inline YouTube video // Load inline YouTube video
var embedcode = '<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/p6h-rYSVX90?rel=0&amp;showinfo=0&amp;autoplay=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>'; var embedcode = '<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/p6h-rYSVX90?rel=0&amp;showinfo=0&amp;autoplay=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>';
$('.hero-videolink').click(function() { $('.hero-graphic').click(function() {
$('.hero-graphic img').replaceWith(embedcode); $('.hero-graphic img').replaceWith(embedcode);
$(this).remove(); $('.hero-videolink').remove();
}); });