.hero.f-col(v-if="showHero")
.hero--video(v-if="heroType === 'video'")
iframe(
v-if="isPlaying"
:src="`https://www.youtube.com/embed/${heroIdFromUrl}?autoplay=1`"
frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope"
allowfullscreen
).embedded
.blank.f-col(v-else)
h3(v-if="heroText") {{ heroText }}
img(:src="getThumbnailFromYt(showHero)" alt="hero alt image")
button(v-if="showPlaybutton" @click="isPlaying = true") play
.hero--image(v-else-if="heroType === 'image'")
.hero--image--overlay.f-col
div(v-html="heroText")
img(:src="showHero" alt="hero alt image")
.hero--image(v-else)
.hero--image--overlay.f-col
div(v-html="heroText")