.hero.w-max.f-col(v-if="heroUrl && !loading")
.tint.w-max
// youTube thumb with text and embedded video
.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(heroUrl)" alt="hero youTube image")
button(v-if="showPlaybutton" @click="isPlaying = true").z-top
// Featured image with text
.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="heroUrl" alt="hero alt image")
// Blank just text
.hero--image(v-else)
.hero--image--overlay.w-max.f-col
div(v-html="heroText")
.hero.loading.w-max.f-col(v-else-if="heroUrl && loading")
.tint.w-max
p loading... show hero: {{heroUrl}}