Add styles for youtube figures

Bring over the youtube shortcode from the old theme, and add styles for the figures
it creates. Add the .figure--youtube class to the <figure> element.

assets/css/010_spacing.css

@@ -61,7 +61,7 @@ p + p {
 
 /* Figures */
 
-{{- $elementsWithXLBlockMargins := "blockquote, .figure--image, .codeblock, .highlight" -}}
+{{- $elementsWithXLBlockMargins := "blockquote, .figure--image, .figure--youtube, .codeblock, .highlight" -}}
 
 p + :is({{ $elementsWithXLBlockMargins }}) {
     margin-block-start: var(--space-xl);

assets/css/050_figures.css

@@ -17,6 +17,20 @@
     }
 }
 
+.figure--youtube {
+  grid-column: main-start / main-end;
+
+  .youtube {
+    width: 100%;
+
+    iframe {
+      aspect-ratio: 16 / 9;
+      margin-bottom: -3px;
+      width: 100%;
+    }
+  }
+}
+
 figcaption {
   color: var(--text-color-secondary);
   font-weight: normal;

layouts/shortcodes/youtube.html

@@ -0,0 +1,12 @@
+{{- $pc := .Page.Site.Config.Privacy.YouTube -}}
+{{- if not $pc.Disable -}}
+{{- $ytHost := cond $pc.PrivacyEnhanced  "www.youtube-nocookie.com" "www.youtube.com" -}}
+{{- $id := .Get "id" | default (.Get 0) -}}
+{{- $class := .Get "class" | default (.Get 1) -}}
+{{- $title := .Get "title" | default "YouTube Video" }}
+<figure class="figure--youtube{{ with $class }}  {{ . }}{{ end }}">
+  <div class="youtube">
+    <iframe src="https://{{ $ytHost }}/embed/{{ $id }}{{ with .Get "autoplay" }}{{ if eq . "true" }}?autoplay=1{{ end }}{{ end }}" allowfullscreen frameborder=0 title="{{ $title }}"></iframe>
+  </div>
+</figure>
+{{ end -}}