Commit 7da4b9db authored by Peter Serwylo's avatar Peter Serwylo

Link to YouTube rather than embedding.

Fixes problem where CSP forbids this type of embedding. Also adds some
privacy because people wont get tracked by YouTube unless they click the
link.

By wrapping an `<img>` tag with a video thumbnail in an `<a
class="youtube" href="https://youtube.com?v=...">` tag, the websites CSS
will overlay a youtube play icon on top.
parent 74d9d893
<iframe width="560" height="315" src="https://www.youtube.com/embed/{{ include.id }}" frameborder="0" allowfullscreen></iframe>
\ No newline at end of file
......@@ -21,5 +21,6 @@ curated app store.
This is a great primer for new users giving them a behind the scenes view on how
apps come to be, from a source code repo to their Android devices.
{% include youtubePlayer.html id="y3zVcYuE-WI" %}
<a class="youtube" href="https://youtube.com/watch?v=y3zVcYuE-WI">
<img src="{{ site.baseurl }}/assets/posts/2018-02-02-linux-conf-au-fdroid-presentation/video-thumbnail.png" />
</a>
......@@ -627,4 +627,26 @@ img {
font-size: 18px;
}
}
}
a.youtube {
position: relative;
/** Clever solution from https://stackoverflow.com/a/12660106/2391921 to overlay image on top with only CSS */
&:after {
position: absolute;
content: "";
pointer-events: none;
background: url("../assets/youtube-logo.png") no-repeat center;
background-size: cover;
width: 200px;
height: 200px;
left: calc(50% - 100px);
bottom: calc(50% + 100px);
}
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment