diff options
| author | Baron Schwartz <xaprb@users.noreply.github.com> | 2019-06-03 02:49:21 +0300 |
|---|---|---|
| committer | Baron Schwartz <xaprb@users.noreply.github.com> | 2019-06-03 02:49:21 +0300 |
| commit | 1fc55c430257e4df3760024624919f96caa2a09e (patch) | |
| tree | af7625526b6b960d62c333948edf99764e3d66bf | |
| parent | a4657dbbb15f6405fd8bb3545ab0b3829d1ab41f (diff) | |
Add ability to embed slides/video on talks pages
| -rw-r--r-- | exampleSite/content/talks/adirondack.md | 1 | ||||
| -rw-r--r-- | layouts/talks/single.html | 32 |
2 files changed, 31 insertions, 2 deletions
diff --git a/exampleSite/content/talks/adirondack.md b/exampleSite/content/talks/adirondack.md index da3c3b3..7c99ead 100644 --- a/exampleSite/content/talks/adirondack.md +++ b/exampleSite/content/talks/adirondack.md @@ -5,6 +5,7 @@ event: "RemarkConf 2018" location: "Mount Remarkable, 6346+F7 Wilmington, South Australia, Australia" site: "https://www.environment.sa.gov.au/parks/find-a-park/Browse_by_region/flinders-ranges-outback/mount-remarkable-national-park" slides: slides/adirondack/ +video: "https://www.youtube.com/watch?v=aVS4W7GZSq0" image: "slides/adirondack/leo-serrat-533922-unsplash.jpg" description: "Story's Remark frameworks help you create sophisticated slides with simple, clean Markdown. There are predefined layouts for most presentation needs, beautiful typography and colors, precise image control, and a simple modular way to create custom layouts." thumbnail: slides/adirondack/thumbnail.jpg diff --git a/layouts/talks/single.html b/layouts/talks/single.html index cf86620..978951d 100644 --- a/layouts/talks/single.html +++ b/layouts/talks/single.html @@ -3,10 +3,10 @@ <article class="center bg-white br-3 pv1 ph4 nested-copy-line-height lh-copy f4 nested-links mw-100 measure-wide"> {{ .Content }} {{ with .Params.slides }} - <p><a class="mb3 pv2 ph3 ba bw1 black br-pill dib" href="{{ . | absURL }}">Slides</a> + <p><a id="slides_link" class="mb3 pv2 ph3 ba bw1 black br-pill dib" href="{{ . | absURL }}">Slides</a> {{ end }} {{ with .Params.video }} - <a class="mb3 pv2 ph3 ba bw1 black br-pill dib" href="{{ . }}">Video</a> + <a id="video_link" class="mb3 pv2 ph3 ba bw1 black br-pill dib" href="{{ . }}">Video</a> {{ end }} {{ with .Params.site }} <a class="mb3 pv2 ph3 ba bw1 black br-pill dib" href="{{ . }}">Website</a> @@ -15,6 +15,34 @@ <a class="mb3 pv2 ph3 ba bw1 black br-pill dib" href="https://www.google.com/maps/place/{{ . }}">Venue</a> {{ end }} </article> +<script type="text/javascript"> +// Add event handlers to slide and video links, to open them in an iframe popup. +$( function() { + if ( $( "#slides_link" ).length ) { + $("#slides_link").click(function(eventObject) { + eventObject.preventDefault(); + var elem = $( this ); + elem.parent().after($("<iframe class='h5 w-100 bn' src='" + elem.attr("href") + "'></iframe>")); + }); + } + if ( $( "#video_link" ).length ) { + $("#video_link").click(function(eventObject) { + var elem = $( this ); + var href = elem.attr("href"); + switch(true) { + case /youtube.com/.test(href): + eventObject.preventDefault(); + href = href.replace("watch?v=", "embed/"); + elem.parent().after($("<iframe class='h5 w-100 bn' src='" + href + "' allow='accelerometer; encrypted-media; gyroscope; picture-in-picture' allowfullscreen></iframe>")); + // default is just to follow the link. + // TODO: add a vimeo embedder here? If you're reading this source code, please submit a PR + // for other video sources you want to be supported here. + } + }); + } +}); + +</script> {{ end }} {{ define "social" }} |