:recycle: adjustments to hero text overlay | bug fix for youtube hero

vue-theme/src/components/hero.vue

             allowfullscreen
         ).embedded.w-max
         .blank.f-col(v-else)
-            h3(v-if="heroText") {{ heroText }}
+            .hero--image--overlay.w-max.f-col
+                h2.t-up.t-cntr(v-if="heroText") {{ heroText }}
             img.w-max(:src="getThumbnailFromYt(showHero)" alt="hero alt image")
             //- button(v-if="showPlaybutton" @click="isPlaying = true") play
             button(v-if="showPlaybutton" @click="isPlaying = true")
         &--overlay
             color: $cia_white
             position: absolute
-            /* top: 30% */
             margin: 20% 0
             h2 
                 /* need better responsive solution for heading size  */
-                /* font-size: 1.5vh */
+                font-size: 5vw
                 color: $cia_white
                 text-shadow: 1px 1px $cia_black
                 max-width: 70vw
+                margin: -25vh 0 0
     &--video
         width: 100vw
         height: 100%
     .blank
         button 
             position: absolute
-            height: $ms-8
-            width: $ms-8
+            min-height: $ms-7
+            min-width: $ms-7
             background-color: rgba(170,17,0,0.4)
             border-radius: 50%
-            border-width: 3px
-            border-color: white
-            border-style: solid
+            border: 2px white solid
+            &:hover 
+                border: 2px #DDD solid
+                background-color: rgba(170,170,170,0.7)
             &:after 
                 content: ""
                 position: absolute
                 top: 20%
-                left: 30%
+                left: 35%
                 border-style: solid
-                border-width: 1.2em 0 1.2em 2.1em
+                border-width: 1em 0 1em 1.6em
                 border-color: transparent transparent transparent white
 
         @media (min-width: $medium)     
             button 
                 height: $ms-9
                 width: $ms-9
-                border-width: 4px
-
+                border-width: 3px
                 &:after 
                     top: 18%
                     left: 30%

vue-theme/src/pages/list.vue

             const page = this.allPages[type]
             if(!page) return
             
-            const json = { url: page.featured, heroType: 'image' }
+            let json = { url: page.featured, heroType: 'image' }
             if(page.hero && JSON.parse(page.hero) && JSON.parse(page.hero).url) {
                 json = JSON.parse(page.hero)
                 json.heroType = 'video'

vue-theme/src/pages/single.vue

         checkAndSetHero(post) {
             if(!post) return
 
-            const json = { url: post.featured, heroType: 'image' }
+            let json = { url: post.featured, heroType: 'image' }
             if(post.hero && JSON.parse(post.hero) && JSON.parse(post.hero).url) {
                 json = JSON.parse(post.hero)
                 json.heroType = 'video'