This is a responsive video section with content overlay. In other other words, this is a responsive hero section with a video as background that you can overlay content on top of.
It supports YouTube and Vimeo.
Install it:
npm i vue-video-hero
Inside your .vue component:
<template>
// ...
<vue-video-hero source="youtube || vimeo" videoId="_XcsNhdz-kM">
// For YouTube:
// https://youtu.be/[_XcsNhdz-kM] <-- this is the id
// For Vimeo:
// https://vimeo.com/[123456789] <-- this is the id
<template #content>
// Put your content here
</template>
</vue-video-hero>
</template>
<script>
// ...
import VueVideoHero from 'vue-video-hero'
// ...
components: {
// ...
VueVideoHero,
}
// ...
</script>
Currently unchangeable
- Auto play on all devices (except iOS < 10)
- Muted audio
- Loops automatically (the video never ends)