Welcome folks today in this blog post we will be showing that how to play responsive background videos using video player in vue.js and nuxt.js using vue.responsive-video-background-player library in javascript. All the full source code of the application is given below.
Live Demo
https://avidofood.github.io/vue-responsive-video-background-player/
Installation
1: Add with npm 💻
|
1 2 3 4 5 |
<span class="pl-c"># For Vue 2.x.x</span> npm install vue-responsive-video-background-player@1.2.2 <span class="pl-c"># For Vue 3.x.x</span> npm install vue-responsive-video-background-player |
2a: Install as a component
|
1 2 3 |
<span class="pl-k">import</span> <span class="pl-v">VideoBackground</span> <span class="pl-k">from</span> <span class="pl-s">'vue-responsive-video-background-player'</span> <span class="pl-v">Vue</span><span class="pl-kos">.</span><span class="pl-en">component</span><span class="pl-kos">(</span><span class="pl-s">'video-background'</span><span class="pl-kos">,</span> <span class="pl-v">VideoBackground</span><span class="pl-kos">)</span><span class="pl-kos">;</span> |
2b: Install as a plugin
|
1 2 3 |
<span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-v">Plugin</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'vue-responsive-video-background-player'</span> <span class="pl-v">Vue</span><span class="pl-kos">.</span><span class="pl-en">use</span><span class="pl-kos">(</span><span class="pl-v">Plugin</span><span class="pl-kos">)</span><span class="pl-kos">;</span> |
3: Only for Nuxt.js users)
Again this is only for Nuxt.js users. Gridsome users click here. At your nuxt.config.js locate the part where you declare your plugins and import the file. Example:
|
1 2 3 4 5 6 |
plugins: [ { src: '~/plugins/vue-video-background', ssr: false } ] |
Usage
Easiest version 🔍
|
1 2 3 4 5 6 |
<span class="pl-kos"><</span><span class="pl-ent">video-background</span> <span class="pl-c1">src</span>="<span class="pl-s"><your-video-path>.mp4</span>" <span class="pl-c1">style</span>="<span class="pl-s">max-height: 400px; height: 100vh;</span>" <span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">h1</span> <span class="pl-c1">style</span>="<span class="pl-s">color: white;</span>"<span class="pl-kos">></span>Hello welcome!<span class="pl-kos"></</span><span class="pl-ent">h1</span><span class="pl-kos">></span> <span class="pl-kos"></</span><span class="pl-ent">video-background</span><span class="pl-kos">></span> |
Advanced version 🌐
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<span class="pl-kos"><</span><span class="pl-ent">video-background</span> <span class="pl-c1">src</span>="<span class="pl-s"><your-default-video-path>.mp4</span>" <span class="pl-c1">poster</span>="<span class="pl-s">/images/mainfoto.jpg</span>" <span class="pl-c1">:sources</span>="<span class="pl-s">[</span> <span class="pl-s"> {src: '<your-tablet-video-path>.mp4', res: 900, autoplay: true}, </span> <span class="pl-s"> {src: '<your-mobile-video-path>.mp4', res: 638, autoplay: true, poster: '<your-mobile-background-image-path>.png'}</span> <span class="pl-s"> ]</span>" <span class="pl-c1">style</span>="<span class="pl-s">max-height: 400px; height: 100vh;</span>" <span class="pl-c1">overlay</span>="<span class="pl-s">linear-gradient(45deg,#2a4ae430,#fb949e6b)</span>" <span class="pl-kos">></span> <span class="pl-kos"><</span><span class="pl-ent">h1</span> <span class="pl-c1">style</span>="<span class="pl-s">color: white;</span>"<span class="pl-kos">></span>Hallo welcome!<span class="pl-kos"></</span><span class="pl-ent">h1</span><span class="pl-kos">></span> <span class="pl-kos"></</span><span class="pl-ent">video-background</span><span class="pl-kos">></span> |
Screenshot
Official Github Repository
