.hero.w-max.f-col(v-if="showHero")
.tint
.hero--video.w-max(v-if="heroType === 'video'")
iframe(
v-if="isPlaying"
:src="`https://www.youtube.com/embed/${heroIdFromUrl}?autoplay=1`"
frameborder="0"
allowfullscreen
).embedded.w-max
.blank.f-col(v-else)
.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")
.hero--image.w-max(v-else-if="heroType === 'image'")
.hero--image--overlay.w-max.f-col
h2.t-up.t-cntr(v-html="heroText")
img.w-max(:src="showHero" alt="hero alt image")
.hero--image(v-else)
.hero--image--overlay.w-max.f-col
div(v-html="heroText")
//- if not hero image then heading overlay to show only in main article