Skip to content
codingtube

codingtube

Coding and Programming tutorials

  • javascript
  • React
  • ES6
  • React js
  • coding
  • ffmpeg
  • java
  • programming
  • information
  • coding
  • Privacy Policy
  • Twitter trends
  • Age Calculatore
  • Codingtube Community
  • YouTube Tags Generator
  • About
  • Toggle search form

Responsive Video Background Player using Vue.js

Posted on December 4, 2021December 4, 2021 By christo No Comments on Responsive Video Background Player using Vue.js

If you are want to play videos in the background then use this simple Vue.js package

Responsive Video Background Player using Vue.js
Responsive Video Background Player using Vue.js

Table of Contents

  • Follow these steps to use it
  • Installation in 2 Steps
    • 1: Add with npm 💻
    • 2a: Install as a component
    • 2b: Install as a plugin
    • (3: Only for Nuxt.js users)
  • Usage – (or to make it runnable 🏃‍♂️)
    • Easiest version 🔍
    • Advanced version 🌐
    • Demo ⚡️
  • Props
    • Props values
  • Events
  • Methods

Follow these steps to use it

Installation in 2 Steps

1: Add with npm 💻

 # For Vue 2.x.x
 npm install vue-responsive-video-background-player@1.3.0

# For Vue 3.x.x
 npm install vue-responsive-video-background-player

2a: Install as a component

 import VideoBackground from 'vue-responsive-video-background-player'

 Vue.component('video-background', VideoBackground);

2b: Install as a plugin

 import { Plugin } from 'vue-responsive-video-background-player'

 Vue.use(Plugin);

(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:

plugins: [
  {
    src: '~/plugins/vue-video-background',
    ssr: false
  }
]

Now the component is globally available and can be used at any .vue file without issues.

Usage – (or to make it runnable 🏃‍♂️)

Easiest version 🔍

 <video-background 
    src="<your-video-path>.mp4"
    style="max-height: 400px; height: 100vh;"
 >
    <h1 style="color: white;">Hello welcome!</h1>
 </video-background>

Advanced version 🌐

 <video-background 
    src="<your-default-video-path>.mp4"
    poster="/images/mainfoto.jpg"
    :sources="[
        {src: '<your-tablet-video-path>.mp4', res: 900, autoplay: true}, 
        {src: '<your-mobile-video-path>.mp4', res: 638, autoplay: true, poster: '<your-mobile-background-image-path>.png'}
    ]"
    style="max-height: 400px; height: 100vh;"
    overlay="linear-gradient(45deg,#2a4ae430,#fb949e6b)" 
>
    <h1 style="color: white;">Hallo welcome!</h1>
</video-background>

Demo ⚡️

Props

Props values

  • src (required: true)

This is your path to your video. You can just use this value for showing your video in every resolution.

  • poster (default: '')

This is your first background image that is shown before the video is loaded.

  • sources (default: [])

This is the main reason for this package. I wanted to have the possibility to change the resolution of the video when the resize event is fired.

To make it work, sources is an array that contains objects. For example:

[{src: '<your-mobile-video-path>.mp4', res: 638, autoplay: true, poster: '<your-mobile-background-image-path>.png'}]

To make it work you need at least src, res, autoplay.

poster is optional.

res stand for resolution. This example means that between 0px and 638px of the window’s width only the mobile video will be shown. After that your default src.

  • autoplay (default: true)

The video is going to be played immediately when the video is ready. If you are setting it to false, you can start the video just by this.$refs.videobackground.player.play(). But remember to set ref=videobackground to the HTML tag <video-background>, so that it can work.

  • overlay (default: '') If you love overlays, then copy the overlay from the advanced example.
  • muted (default: true)

Warning. Videos are perhaps not played when unmuted.

  • loop (default: true)

Loops through the video. You can catch the event ended to show only the poster.

  • preload (default: auto)
  • objectFit (default: cover)

So the video fits perfectly in the container

  • playsWhen (default: canplay)

This is important, if you know that you might have users with bad internet speed, you should definetly use canplaythrough.

  • playbackRate (default: 1.0)

The playbackRate property sets the current playback speed of the video.

  • transition (default: fade)

You can add your own transition styles here. If you set it to empty string, it won’t show any transitions.

Events

  • ready: Video is loaded
  • playing: Video is playing
  • error: Video error
  • loading: Video is loading
  • ended: Video finished, only when loop is set to false

Methods

If you happen to need more control over the player, you can use the internal methods. For that, you need to set ref=videobackground to the HTML tag <video-background>. After that you can call all methods like this this.$refs.videobackground.player.play().

  • play(): Video is playing
  • pause(): Video is paused
  • show(): Video is shown
  • hide(): Video is hidden, the poster is shown
  • load(): Video is loaded
Demo
Full project
vue.js Tags:Responsive Video Background Player using Vue.js, vue.js

Post navigation

Previous Post: Get easy and reactive access to the width and height of your screen using vue.js
Next Post: Vue.js progress bar

Related Posts

A Vue UI component for showing notifications vue.js
Vue-Hotspot is an image hotspot component for Vue.js vue.js
Vue scroll loader vue.js
responsive image with zoomed image on hover using vue.js vue.js
Vue.js form validation vee-validate library vue.js
material vue.js date range picker vue.js

Leave a Reply Cancel reply

You must be logged in to post a comment.

Recent Posts

  • Affiliate Marketing Principles
  • The Basics You Need to Know About Affiliate Marketing
  • Affiliate Marketing Options
  • All About Affiliate Marketing
  • Classification of Database Management Systems
  • Three-Tier and n-Tier Architectures
    for Web Applications
  • Two-Tier Client/Server Architectures for DBMSs
  • Basic Client/Server Architectures in DBMS
  • Centralized DBMSs Architecture in DBMS
  • Tools, Application Environments, and Communications Facilities in DBMS

Categories

  • Affiliate marketing (5)
  • Algorithm (43)
  • amp (3)
  • android (223)
  • Android App (8)
  • Android app review (4)
  • android tutorial (60)
  • Artificial intelligence (61)
  • AWS (3)
  • bitcoin (8)
  • blockchain (1)
  • c (5)
  • c language (105)
  • cloud computing (4)
  • coding (4)
  • coding app (4)
  • complex number (1)
  • Computer Graphics (66)
  • data compression (65)
  • data structure (188)
  • DBMS (44)
  • digital marketing (9)
  • distributed systems (11)
  • ffmpeg (26)
  • game (3)
  • html (6)
  • image processing (35)
  • Inequalities (1)
  • information (4)
  • java (212)
  • java network (1)
  • javascript (9)
  • kotlin (4)
  • leetcode (1)
  • math (21)
  • maven (1)
  • mysql (1)
  • Node.js (8)
  • operating system (109)
  • php (310)
  • Principle Of Mathematical Induction (1)
  • programming (6)
  • Python (4)
  • Python data structure (9)
  • React native (1)
  • React.js (22)
  • Redux (1)
  • seo (4)
  • set (12)
  • trigonometry (6)
  • vue.js (35)
  • XML (3)

sitemap

sitemap of videos

sitemap of webstories

sitemap of website

  • Affiliate marketing
  • Algorithm
  • amp
  • android
  • Android App
  • Android app review
  • android tutorial
  • Artificial intelligence
  • AWS
  • bitcoin
  • blockchain
  • c
  • c language
  • cloud computing
  • coding
  • coding app
  • complex number
  • Computer Graphics
  • data compression
  • data structure
  • DBMS
  • digital marketing
  • distributed systems
  • ffmpeg
  • game
  • html
  • image processing
  • Inequalities
  • information
  • java
  • java network
  • javascript
  • kotlin
  • leetcode
  • math
  • maven
  • mysql
  • Node.js
  • operating system
  • php
  • Principle Of Mathematical Induction
  • programming
  • Python
  • Python data structure
  • React native
  • React.js
  • Redux
  • seo
  • set
  • trigonometry
  • vue.js
  • XML
  • Blog
  • Data compression tutorial - codingpoint
  • How to change mbstring in php 5.6
  • How to diagnose out of memory killed PHP-FPM
  • Introduction to jQuery
  • Privacy
  • Affiliate marketing
  • Algorithm
  • amp
  • android
  • Android App
  • Android app review
  • android tutorial
  • Artificial intelligence
  • AWS
  • bitcoin
  • blockchain
  • c
  • c language
  • cloud computing
  • coding
  • coding app
  • complex number
  • Computer Graphics
  • data compression
  • data structure
  • DBMS
  • digital marketing
  • distributed systems
  • ffmpeg
  • game
  • html
  • image processing
  • Inequalities
  • information
  • java
  • java network
  • javascript
  • kotlin
  • leetcode
  • math
  • maven
  • mysql
  • Node.js
  • operating system
  • php
  • Principle Of Mathematical Induction
  • programming
  • Python
  • Python data structure
  • React native
  • React.js
  • Redux
  • seo
  • set
  • trigonometry
  • vue.js
  • XML
  • Blog
  • Data compression tutorial - codingpoint
  • How to change mbstring in php 5.6
  • How to diagnose out of memory killed PHP-FPM
  • Introduction to jQuery
  • Privacy

© codingtube.tech