{"id":13824287,"url":"https://github.com/avidofood/vue-responsive-video-background-player","last_synced_at":"2025-07-08T19:31:44.192Z","repository":{"id":35497189,"uuid":"218025060","full_name":"avidofood/vue-responsive-video-background-player","owner":"avidofood","description":"Play your own videos in background responsively in different resolutions.","archived":false,"fork":false,"pushed_at":"2023-08-26T05:55:13.000Z","size":24416,"stargazers_count":293,"open_issues_count":12,"forks_count":38,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-11-06T05:44:42.267Z","etag":null,"topics":["background","background-video","resolution-switcher","video-background-player","videobg","vue","vue-player","vue-responsive-videobg","vue-video","vue-video-player","vue3"],"latest_commit_sha":null,"homepage":"https://avidofood.github.io/vue-responsive-video-background-player/","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/avidofood.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2019-10-28T10:50:25.000Z","updated_at":"2024-10-30T11:02:45.000Z","dependencies_parsed_at":"2024-04-12T17:40:16.437Z","dependency_job_id":"f991280c-f73f-4681-9770-2117e7b980da","html_url":"https://github.com/avidofood/vue-responsive-video-background-player","commit_stats":{"total_commits":49,"total_committers":5,"mean_commits":9.8,"dds":"0.12244897959183676","last_synced_commit":"a9e9891d0a6bbf951548e52c7b47aba0b7f8918a"},"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/avidofood%2Fvue-responsive-video-background-player","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/avidofood%2Fvue-responsive-video-background-player/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/avidofood%2Fvue-responsive-video-background-player/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/avidofood%2Fvue-responsive-video-background-player/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/avidofood","download_url":"https://codeload.github.com/avidofood/vue-responsive-video-background-player/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225457765,"owners_count":17477351,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["background","background-video","resolution-switcher","video-background-player","videobg","vue","vue-player","vue-responsive-videobg","vue-video","vue-video-player","vue3"],"created_at":"2024-08-04T09:01:00.284Z","updated_at":"2025-07-08T19:31:44.174Z","avatar_url":"https://github.com/avidofood.png","language":"Vue","funding_links":[],"categories":["Packages","Vue","Components \u0026 Libraries","UI Components [🔝](#readme)"],"sub_categories":["UI Components"],"readme":"# Responsive Video Background Player for Vue 2 \u0026 3 ⚡️\n\n\u003ca href=\"https://www.npmjs.com/package/vue-responsive-video-background-player\"\u003e\n  \u003cimg src=\"https://img.shields.io/npm/dt/vue-responsive-video-background-player.svg\" alt=\"Downloads\"\u003e\n\u003c/a\u003e\n\u003ca href=\"https://www.npmjs.com/package/vue-responsive-video-background-player\"\u003e\n  \u003cimg src=\"https://img.shields.io/npm/v/vue-responsive-video-background-player.svg\" alt=\"Version\"\u003e\n\u003c/a\u003e\n\u003ca href=\"https://www.npmjs.com/package/vue-responsive-video-background-player\"\u003e\n  \u003cimg src=\"https://img.shields.io/npm/l/vue-responsive-video-background-player.svg\" alt=\"License\"\u003e\n\u003c/a\u003e\n\n![Laravel Tongue](https://raw.githubusercontent.com/avidofood/vue-responsive-video-background-player/master/demo/public/images/roadster.png)\n\n**If you are looking to play videos in the background, you've found the right Vue package! 😜 (Heads up: No YouTube videos... yet!)**\n\n \u003e**Prerequisites**: Vue 2.x.x or Vue 3.x.x\n\n## Installation in 2 Steps\n\n### 1: Add with npm 💻\n```bash\n # For Vue 2.x.x\n npm install vue-responsive-video-background-player@1.3.1\n\n# For Vue 3.x.x\n npm install vue-responsive-video-background-player\n```\n\n### 2a: Install as a component\n\n```javascript\n import VideoBackground from 'vue-responsive-video-background-player'\n\n Vue.component('video-background', VideoBackground);\n```\n### 2b: Install as a plugin \n```javascript\n import { Plugin } from 'vue-responsive-video-background-player'\n\n Vue.use(Plugin);\n```\n\n### (3: Only for Nuxt.js users)\n#### Nuxt.js v2.xx.x\n \u003eThanks to [@skoulix](https://github.com/avidofood/vue-responsive-video-background-player/issues/8#issuecomment-654821213) for his instructions:\n\n  Again this is only for Nuxt.js users. Gridsome users click [here](https://gridsome.org/docs/assets-scripts/#without-ssr-support). At your `nuxt.config.js` locate the part where you declare your plugins and import the file. Example: \n\n```\nplugins: [\n  {\n    src: '~/plugins/vue-video-background',\n    ssr: false\n  }\n]\n```\n\nNow the component is globally available and can be used at any .vue file without issues.\n\n#### Nuxt.js v3.xx.x\n \u003eThanks to [@Vertenz](https://github.com/avidofood/vue-responsive-video-background-player/issues/8#issuecomment-1192011721) for his instructions:\n\n for NUXT 3 I used directive to make it work. Create **plugins** directory then add **video-bg.client.ts** _(or any name but **.client** is obligatory for client side render, cause you don't have the window at ssr)_ file with\n\n```\nimport { defineNuxtPlugin } from \"#app\";\nimport { Plugin } from \"vue-responsive-video-background-player\";\n\nexport default defineNuxtPlugin((nuxtApp) =\u003e {\n  nuxtApp.vueApp.use(Plugin);\n});\n```\n\nthen you use the **video-background** tag\n\n\n## Usage - (or to make it runnable 🏃‍♂️)\n\n\n### Easiest version 🔍\n\n```html\n \u003cvideo-background \n    src=\"\u003cyour-video-path\u003e.mp4\"\n    style=\"max-height: 400px; height: 100vh;\"\n \u003e\n    \u003ch1 style=\"color: white;\"\u003eHello welcome!\u003c/h1\u003e\n \u003c/video-background\u003e\n```\n\n### Advanced version 🌐\n\n```html\n \u003cvideo-background \n    src=\"\u003cyour-default-video-path\u003e.mp4\"\n    poster=\"/images/mainfoto.jpg\"\n    :sources=\"[\n        {src: '\u003cyour-tablet-video-path\u003e.mp4', res: 900, autoplay: true}, \n        {src: '\u003cyour-mobile-video-path\u003e.mp4', res: 638, autoplay: true, poster: '\u003cyour-mobile-background-image-path\u003e.png'}\n    ]\"\n    style=\"max-height: 400px; height: 100vh;\"\n    overlay=\"linear-gradient(45deg,#2a4ae430,#fb949e6b)\" \n\u003e\n    \u003ch1 style=\"color: white;\"\u003eHallo welcome!\u003c/h1\u003e\n\u003c/video-background\u003e\n```\n\n### Demo ⚡️\n\nhttps://avidofood.github.io/vue-responsive-video-background-player/\n\n## Props\n\nThis package is for responsive videos depicting different video resolution. Have you ever visited my favorite car company \u003ca href=\"https://tesla.com\"\u003eTesla\u003c/a\u003e? Have a look, they use a lot of video background videos and are using different resolutions for each device.\n\n### Props values\n\n- `src` (required: `true`)\n\nThis is your path to your video. You can just use this value for showing your video in every resolution.\n\n \u003e**Warning** for [Vue CLI](https://cli.vuejs.org/guide/creating-a-project.html): You need to bind the source like this: ``:src=\"require(`@/assets/video/timelapse.mp4`)\"``. [Read here why](https://github.com/avidofood/vue-responsive-video-background-player/issues/10#issuecomment-646959090)\n\n\n- `poster` (default: `''`)\n\nThis is your first background image that is shown before the video is loaded.\n\n \u003e**Warning** for [Vue CLI](https://cli.vuejs.org/guide/creating-a-project.html): You need to bind the source like this: ``:src=\"require(`@/assets/img/logo.png`)\"``. [Read here why](https://github.com/avidofood/vue-responsive-video-background-player/issues/10#issuecomment-646959090)\n\n- `sources` (default: `[]`)\n\nThis 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.\n\nTo make it work, sources is an array that contains objects. For example:\n\n`[{src: '\u003cyour-mobile-video-path\u003e.mp4', res: 638, autoplay: true, poster: '\u003cyour-mobile-background-image-path\u003e.png'}]`\n\nTo make it work you need at least `src, res, autoplay`. \n\n`poster` is optional.\n\n`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`.\n\n- `autoplay` (default: `true`)\n\nThe 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 `\u003cvideo-background\u003e`, so that it can work.\n\n- `overlay` (default: `''`)\nIf you love overlays, then copy the overlay from the advanced example.\n\n- `muted` (default: `true`)\n\nWarning. Videos are perhaps not played when unmuted.\n\n- `loop` (default: `true`)\n\nLoops through the video. You can catch the event `ended` to show only the poster.\n\n- `preload` (default: `auto`)\n\nhttps://www.w3schools.com/tags/att_video_preload.asp\n\n- `objectFit` (default: `cover`)\n\nSo the video fits perfectly in the container\n\n- `objectPosition` (default: `center`)\n\nSo the video fits exact position in the container\n\n\u003e the value is also used as a poster background-position \n\n- `posterBgSize` (default: `cover`)\n\nSo the poster fits perfectly in the container\n\n\u003e Using the same values for `objectFit` and `posterBgSize` is recommended\n\n- `playsWhen` (default: `canplay`)\n\nThis is important, if you know that you might have users with bad internet speed, you should definetly use `canplaythrough`. Learn more in [video events](https://www.w3schools.com/tags/ref_av_dom.asp).\n\n- `playbackRate` (default: `1.0`)\n  \nThe playbackRate property sets the current playback speed of the video. [Example](https://www.w3schools.com/jsref/prop_video_playbackrate.asp) but negative values didn't work for me?\n\n- `transition` (default: `fade`)\n  \nYou can add your own transition styles here. If you set it to empty string, it won't show any transitions.\n\n## Events \n\n- `ready`: Video is loaded\n- `playing`: Video is playing\n- `paused`: Video is paused\n- `error`: Video error\n- `loading`: Video is loading\n- `ended`: Video finished, only when `loop` is set to false\n\n## Methods\n\nIf 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 `\u003cvideo-background\u003e`. After that you can call all methods like this `this.$refs.videobackground.player.play()`.\n\n- `play()`: Plays the video\n- `pause()`: Pauses the video\n- `show()`: Shows the video\n- `hide()`: Hides the video and shows the poster\n- `load()`: Loads the video\n\n \n## Security\n\nIf you discover any security problems, please, don't email me. (I'm a bit scared 😱) avidofood@protonmail.com\n\n## Credits\n\nNow comes the best part! 😍\nThis package was inspired by:\n\n - https://tesla.com\n\nWow, you really read all that?! If you enjoyed this, hit the ⭐️ button to give me a 🤩 face. \n\n## Changelog\n\n### v2.4.0\n- **Breaking Change**: Removed `$` prefix from private methods to prevent potential conflicts with other libraries (e.g., jQuery).  \n  The following methods have been renamed:\n  - `$_change_video_resolution` → `_change_video_resolution`\n  - `$_innerWidth` → `_innerWidth`\n\n  If you were using these methods in your project, please update your code accordingly.\n\n- Improved compatibility with legacy code and projects using jQuery.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Favidofood%2Fvue-responsive-video-background-player","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Favidofood%2Fvue-responsive-video-background-player","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Favidofood%2Fvue-responsive-video-background-player/lists"}