add end to youtube parameters

layouts/shortcodes/image.html

@@ -2,6 +2,7 @@
 {{ $filename := .Get "filename" }}
 {{ with $.Site.Params.imagespath }} {{ $path := ( . ) }}{{ end }}
 <div class="box box--column box--image
+{{ with .Get "style"}} box--image-{{ . }}{{ end }}
 {{ with .Get "link"}}{{ if eq . "lightbox" }} box--image-lightbox{{ end }}{{ end }}
 "
 {{ with .Get "maxwidth"}} maxWidth="{{ . }}"{{ end }}

layouts/shortcodes/youtube.html

@@ -12,6 +12,7 @@
     <div
        youtube_id="{{ .Get "id" }}"
        {{ with .Get "start"}} start="{{ . }}"{{ end }}
+       {{ with .Get "end"}} end="{{ . }}"{{ end }}
        {{ with .Get "plist"}} list="{{ . }}"{{ end }}
        {{ with $.Scratch.Get "maxwidth"}} maxWidth="{{ . }}"{{ end }}
        {{ with $.Scratch.Get "wpad"}} wPad="{{ . }}"{{ end }}

static/css/page.css

@@ -287,7 +287,7 @@
   justify-content: center;
   background-repeat: no-repeat;
   background-size: cover;
-  -webkit-filter: brightness(.8);
+  filter: brightness(0.8);
 }
 
 .thumb--yt:hover {

static/js/youtube.js

@@ -30,9 +30,10 @@
     var mw = $box.attr('maxWidth');
     var wp = $box.attr('wPad');
     var start = $box.attr("start") || 1
+    if ($box.attr("end")) { var end = "&end=" + $box.attr("end") } else { var end = "" }
     var list = ""
     if ($box.attr("list")) { list = `&list=${$box.attr("list")}` }
-    var url = `https://www.youtube.com/embed/${id}?${autoplay}start=${start}`
+    var url = `https://www.youtube.com/embed/${id}?${autoplay}start=${start}${end}`
     var vIframe = `<iframe width = "560" height = "315" src ="${url}${list}" frameborder = "0" allowfullscreen></iframe>`
     $box.html(vIframe).children().fitToWindow($box.data("maxWidth") || mw, $box.data("wPad") || wp)
   }