Add figure to video shortcodes

layouts/partials/paige/iframe.html

@@ -0,0 +1,8 @@
+{{ $params := . }}
+
+{{ $fullscreen := $params.fullscreen }}
+{{ $referrerpolicy := $params.referrerpolicy | default "no-referrer" }}
+{{ $src := $params.src }}
+{{ $title := $params.title }}
+
+<iframe {{ if $fullscreen }} allowfullscreen {{ end }} {{ with $referrerpolicy }} referrerpolicy="{{ . }}" {{ end }} {{ with $src }} src="{{ . | safeURL }}" {{ end }} {{ with $title }} title="{{ . }}" {{ end }}></iframe>

layouts/partials/paige/scripts.html

@@ -17,17 +17,10 @@ function paigeResize() {
     } else {
         w = parseFloat(mw.substring(0, mw.length - 2));
     }
-    var es = document.querySelectorAll("section.paige-content > div");
+    var es = document.querySelectorAll("div.paige-video");
     for (var i = 0; i < es.length; i++) {
         var e = es[i];
-        var iframe = false;
+        if (e.style.width !== w) {
-        for (var j = 0; j < e.children.length; j++) {
-            if (e.children.item(j).tagName.toLowerCase() === "iframe") {
-                iframe = true;
-                break;
-            }
-        }
-        if (iframe && e.style.width !== w) {
             e.style.width = w + "px";
         }
     }

layouts/partials/paige/video.html

@@ -0,0 +1,16 @@
+{{ $params := . }}
+
+{{ $class := $params.class | default "paige-video ratio ratio-16x9" }}
+{{ $fullscreen := $params.fullscreen }}
+{{ $referrerpolicy := $params.referrerpolicy }}
+{{ $src := $params.src }}
+{{ $title := $params.title }}
+
+<div class="{{ $class }}">
+    {{ partial "paige/iframe.html" (dict
+        "fullscreen" $fullscreen
+        "referrerpolicy" $referrerpolicy
+        "src" $src
+        "title" $title
+    ) }}
+</div>

layouts/shortcodes/paige/vimeo.html

@@ -2,25 +2,35 @@
 {{ $autoplay := .Get "autoplay" }}
 {{ $background := .Get "background" }}
 {{ $byline := .Get "byline" }}
+{{ $caption := .Get "caption" }}
 {{ $color := .Get "color" }}
 {{ $controls := .Get "controls" | default true }}
 {{ $description := .Get "title" | default "Vimeo video" }}
 {{ $dnt := .Get "dnt" | default site.Config.Privacy.Vimeo.EnableDNT }}
+{{ $float := .Get "float" }}
 {{ $fullscreen := .Get "fullscreen" | default true }}
+{{ $height := .Get "height" }}
+{{ $horizontal := .Get "horizontal" }}
 {{ $keyboard := .Get "keyboard" | default true }}
 {{ $loop := .Get "loop" }}
+{{ $maxheight := .Get "maxheight" }}
+{{ $maxwidth := .Get "maxwidth" }}
 {{ $muted := .Get "muted" }}
+{{ $number := .Get "number" }}
+{{ $numbered := .Get "numbered" }}
 {{ $pip := .Get "pip" }}
 {{ $playsinline := .Get "playsinline" | default true }}
 {{ $portrait := .Get "portrait" }}
 {{ $quality := .Get "quality" }}
 {{ $referrerpolicy := .Get "referrerpolicy" | default "no-referrer" }}
 {{ $speed := .Get "speed" }}
-{{ $time := .Get "time" }}
 {{ $texttrack := .Get "texttrack" }}
+{{ $time := .Get "time" }}
 {{ $title := .Get "title" }}
 {{ $transparent := .Get "transparent" | default true }}
+{{ $vertical := .Get "vertical" }}
 {{ $video := .Get 0 | default (.Get "video") }}
+{{ $width := .Get "width" }}
 
 {{ $params := slice }}
 
@@ -102,6 +112,28 @@
 
 {{ $params = delimit ($params | sort | uniq) "&" }}
 
-<div class="mb-3 ratio ratio-16x9">
+{{ $src := print "https://player.vimeo.com/video/" $video }}
-    <iframe {{ if $fullscreen }} allowfullscreen {{ end }} {{ with $referrerpolicy }} referrerpolicy="{{ . }}" {{ end }} src="https://player.vimeo.com/video/{{ $video | safeURL }}{{ with $params }}?{{ . | safeURL }}{{ end }}" {{ with $description }} title="{{ . }}" {{ end }}></iframe>
+
-</div>
+{{ with $params }}
+    {{ $src = print $src "?" . }}
+{{ end }}
+
+{{ partial "paige/figure.html" (dict
+    "caption" $caption
+    "content" (partial "paige/video.html" (dict
+        "fullscreen" $fullscreen
+        "referrerpolicy" $referrerpolicy
+        "src" $src
+        "title" $description
+    ))
+    "float" $float
+    "gap" 2
+    "height" $height
+    "horizontal" $horizontal
+    "maxheight" $maxheight
+    "maxwidth" $maxwidth
+    "number" $number
+    "numbered" $numbered
+    "vertical" $vertical
+    "width" $width
+) }}

layouts/shortcodes/paige/youtube.html

@@ -1,14 +1,24 @@
 {{ $autoplay := .Get "autoplay" }}
+{{ $caption := .Get "caption" }}
 {{ $controls := .Get "controls" | default true }}
 {{ $description := .Get "description" | default "YouTube video" }}
 {{ $end := .Get "end" }}
+{{ $float := .Get "float" }}
 {{ $fullscreen := .Get "fullscreen" | default true }}
+{{ $height := .Get "height" }}
+{{ $horizontal := .Get "horizontal" }}
 {{ $list := .Get "list" }}
 {{ $loop := .Get "loop" }}
+{{ $maxheight := .Get "maxheight" }}
+{{ $maxwidth := .Get "maxwidth" }}
 {{ $mute := .Get "mute" }}
+{{ $number := .Get "number" }}
+{{ $numbered := .Get "numbered" }}
 {{ $referrerpolicy := .Get "referrerpolicy" | default "no-referrer-when-downgrade" }}
 {{ $start := .Get "start" }}
+{{ $vertical := .Get "vertical" }}
 {{ $video := .Get 0 | default (.Get "video") | default "dQw4w9WgXcQ" }}
+{{ $width := .Get "width" }}
 
 {{ $host := cond site.Config.Privacy.YouTube.PrivacyEnhanced "www.youtube-nocookie.com" "www.youtube.com" }}
 
@@ -56,6 +66,28 @@
 
 {{ $params = delimit ($params | sort | uniq) "&" }}
 
-<div class="mb-3 ratio ratio-16x9">
+{{ $src := print "https://" $host "/" $path }}
-    <iframe {{ if $fullscreen }} allowfullscreen {{ end }} {{ with $referrerpolicy }} referrerpolicy="{{ . }}" {{ end }} src="https://{{ $host | safeURL }}/{{ $path | safeURL }}?{{ $params | safeURL }}" {{ with $description }} title="{{ . }}" {{ end }}></iframe>
+
-</div>
+{{ with $params }}
+    {{ $src = print $src "?" . }}
+{{ end }}
+
+{{ partial "paige/figure.html" (dict
+    "caption" $caption
+    "content" (partial "paige/video.html" (dict
+        "fullscreen" $fullscreen
+        "referrerpolicy" $referrerpolicy
+        "src" $src
+        "title" $description
+    ))
+    "float" $float
+    "gap" 2
+    "height" $height
+    "horizontal" $horizontal
+    "maxheight" $maxheight
+    "maxwidth" $maxwidth
+    "number" $number
+    "numbered" $numbered
+    "vertical" $vertical
+    "width" $width
+) }}