refactor youtube shortocde with direct site keys - add before/after padding

layouts/shortcodes/youtube.html

@@ -1,21 +1,18 @@
 {{ if .IsNamedParams }}
-{{ with $.Site.Params.youtube }}{{ $.Scratch.Set "maxwidth" .maxwidth }}{{ end }}
+{{ $.Scratch.Set "maxwidth" ( $.Page.Site.Params.youtube.maxwidth | .Get "maxwidth" )  }}
-{{ with .Get "maxwidth" }}{{ $.Scratch.Set "maxwidth" . }}{{ end }}
+{{ $.Scratch.Set "wpad" ( $.Page.Site.Params.youtube.wpad | .Get "wpad" )  }}
-{{ with $.Site.Params.youtube }}{{ $.Scratch.Set "wpad" .wpad }}{{ end }}
+{{ $.Scratch.Set "nothumb" ( $.Page.Site.Params.youtube.disable_thumb | .Get "nothumb" )  }}
-{{ with .Get "wpad" }}{{ $.Scratch.Set "wpad" . }}{{ end }}
+<div class="box box--embed box--column box--youtube">
-{{ with $.Site.Params.youtube }}{{ $.Scratch.Set "noThumb" .disable_thumb }}{{ end }}
-{{ with .Get "nothumb" }}{{ $.Scratch.Set "noThumb" . }}{{ end }}
-<div class="box box--column">
     {{ with .Get "title" }}
     <div class="box__title">{{ . }}</div>
     {{ end }}
-    <div class="box box--embed box--youtube"
+    <div
        youtube_id="{{ .Get "id" }}"
        {{ with .Get "start"}} start="{{ . }}"{{ end }}
        {{ with .Get "plist"}} list="{{ . }}"{{ end }}
        {{ with $.Scratch.Get "maxwidth"}} maxWidth="{{ . }}"{{ end }}
        {{ with $.Scratch.Get "wpad"}} wPad="{{ . }}"{{ end }}
-       {{ with $.Scratch.Get "noThumb"}} nothumb="yes" {{ end }}
+       {{ with $.Scratch.Get "nothumb"}} nothumb="yes" {{ end }}
        >
   <!-- thumb and video get put here -->
     </div>
@@ -25,11 +22,10 @@
 </div>
 {{ else }}
 {{ $numOfParams := ( len .Params ) }}
-{{ with $.Site.Params.youtube }}{{ $.Scratch.Set "noThumb" .disable_thumb }}{{ end }}
 <div class="box box--embed box--youtube"
        youtube_id="{{ .Get 0 }}"
        {{ if eq $numOfParams 2 }} start="{{ .Get 1 }}"{{ end }}
-       {{ with $.Scratch.Get "noThumb"}} nothumb="yes" {{ end }}
+       {{ with $.Page.Site.Params.youtube.disable_thumb }} nothumb="yes" {{ end }}
        >
       <!-- image or iframe injected here -->
 </div>

static/css/page.css

@@ -176,6 +176,22 @@
   flex-flow: wrap;
   align-content: center;
   justify-content: center;
+  padding-left: 0.5em;
+  padding-right: 0.5em;
+}
+
+.box--embed::before {
+  content: "";
+  height: 0.5em;
+}
+
+.box--embed::after {
+  content: "";
+  height: 0.5em;
+}
+
+.box--btn-bar {
+  padding-top: 0.5em;
   padding-bottom: 0.5em;
 }
 
@@ -184,6 +200,15 @@
   align-items: center;
 }
 
+.box__caption {
+  font-style: italic;
+}
+
+.box__title {
+  text-transform: capitalize;
+  font-weight: bold;
+}
+
 .box--image {
   max-width: 450px;
   padding: 0.5em;
@@ -197,12 +222,10 @@
 
 .box--btn {
   padding: 0.5rem;
-  margin-bottom: 0.5rem;
 }
 
 .box--btn-bar > .box--btn {
   margin-right: 0.2em;
-  margin-bottom: 0.5em;
 }
 
 .btn__text {
@@ -246,7 +269,7 @@
   opacity: 1;
 }
 
-/*may get rid of thise*/
+/*may get rid of this after fixing embed shortcode */
 .box__embed {
   width: 100%;
   display: flex;
@@ -259,6 +282,7 @@
 .box--embed {
   flex-direction: column;
   flex-wrap: nowrap;
+  padding-bottom: 0;
 }
 
 .thumb--yt {
@@ -267,26 +291,18 @@
   justify-content: center;
   background-repeat: no-repeat;
   background-size: cover;
+  -webkit-filter: brightness(.8);
 }
 
 .thumb--yt:hover {
-  -webkit-filter: brightness(1.2);
+  -webkit-filter: brightness(1);
   cursor: pointer;
 }
 
 .thumb--yt > .play-button {
-  font-size: 4em;
+  font-size: 3.5em;
-}
+  color: red;
-
+  text-shadow: 3px 3px  black;
-.box__caption {
-  text-transform: capitalize;
-  font-style: italic;
-}
-
-.box__title {
-  text-transform: uppercase;
-  font-weight: bold;
-  padding-top: 0.75em;
 }
 
 .box__embed--disqus {