{"id":16976941,"url":"https://github.com/johndatserakis/vue-video-section","last_synced_at":"2025-03-22T14:31:56.635Z","repository":{"id":72022715,"uuid":"190840673","full_name":"johndatserakis/vue-video-section","owner":"johndatserakis","description":"📼 A simple video header/section component for Vue. Good for video backgrounds and overlaying content on them.","archived":false,"fork":false,"pushed_at":"2019-07-29T18:36:10.000Z","size":15696,"stargazers_count":33,"open_issues_count":1,"forks_count":5,"subscribers_count":3,"default_branch":"develop","last_synced_at":"2025-03-01T16:47:43.582Z","etag":null,"topics":["animated","background","header","section","video","vue"],"latest_commit_sha":null,"homepage":"https://johndatserakis.github.io/vue-video-section/","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/johndatserakis.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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}},"created_at":"2019-06-08T03:25:52.000Z","updated_at":"2024-02-23T20:05:28.000Z","dependencies_parsed_at":"2023-03-11T11:44:22.698Z","dependency_job_id":null,"html_url":"https://github.com/johndatserakis/vue-video-section","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johndatserakis%2Fvue-video-section","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johndatserakis%2Fvue-video-section/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johndatserakis%2Fvue-video-section/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johndatserakis%2Fvue-video-section/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/johndatserakis","download_url":"https://codeload.github.com/johndatserakis/vue-video-section/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244217920,"owners_count":20417677,"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":["animated","background","header","section","video","vue"],"created_at":"2024-10-14T01:27:39.537Z","updated_at":"2025-03-22T14:31:53.407Z","avatar_url":"https://github.com/johndatserakis.png","language":"Vue","funding_links":[],"categories":["Components \u0026 Libraries","UI Components [🔝](#readme)","UI Components"],"sub_categories":["UI Components","Audio / Video"],"readme":"\u003cp align=\"center\"\u003e\u003ca href=\"https://johndatserakis.github.io/vue-video-section/\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e\u003cimg src=\"./src/assets/images/panel.png\" width=\"250\" style=\"max-height: 250px;\" alt=\"vue-video-section\"\u003e\u003c/a\u003e\u003c/p\u003e\n\n# vue-video-section\n\nA simple video header/section component for Vue. Good for video backgrounds and overlaying content on them.\n\n\u003cp align=\"left\"\u003e\n  \u003ca href=\"https://www.npmjs.com/package/vue-video-section\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/vue-video-section.svg\" alt=\"NPM Version\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/vue-video-section\"\u003e\u003cimg src=\"https://img.shields.io/npm/dm/vue-video-section.svg\" alt=\"NPM Downloads\"\u003e\u003c/a\u003e\n  \u003ca href=\"http://opensource.org/licenses/MIT\"\u003e\u003cimg src=\"https://img.shields.io/badge/license-MIT-blue.svg\" alt=\"License\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://twitter.com/intent/tweet?url=https%3A%2F%2Fgithub.com%2Fjohndatserakis%2Fvue-video-section\u0026text=Check%20out%20vue-video-section%20on%20GitHub\u0026via=johndatserakis\"\u003e\u003cimg src=\"https://img.shields.io/twitter/url/https/github.com/johndatserakis/vue-video-section.svg?style=social\" alt=\"Tweet\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n### Links\n\n[View demo](https://johndatserakis.github.io/vue-video-section/)\n\n[View on npm](https://www.npmjs.com/package/vue-video-section)\n\n[View on GitHub](https://github.com/johndatserakis/vue-video-section)\n\n### Install\n\n##### Download\n\n```\n# npm\nnpm i vue-video-section\n\n# yarn\nyarn add vue-video-section\n```\n\nOr you can include it through the browser at the bottom of your page along with the css:\n\n```html\n\u003c!-- Please note if you're using the browser method you're going to want to adjust the version number as needed. The number given here is just an initial version. --\u003e\n\n\u003cscript src=\"https://unpkg.com/vue-video-section@1.0.0/dist/vue-video-section.min.js\"\u003e\u003c/script\u003e\n\n\u003clink rel=\"stylesheet\" type=\"text/css\" href=\"https://unpkg.com/vue-video-section@1.0.0/dist/vue-video-section.css\"\u003e\n```\n\n##### Use\n\n```html\n\u003c!-- css import for when you want to import the component css into your css file/files  --\u003e\n@import '/path/to/node_modules/vue-video-section/dist/vue-video-section.css';\n\nOR\n\n\u003c!-- javascript import for when you're importing the css directly in your javascript  --\u003e\nimport 'vue-video-section/dist/vue-video-section.css'\n\nTHEN\n\nimport VueVideoSection from 'vue-video-section'\nVue.component('vue-video-section', VueVideoSection)\n```\n\n### About\n\n`vue-video-section` is a simple Vue component that helps you use a video background as a background for a header or another section on your site.\n\nOne pain point `vue-video-section` hopes to solve is the overlaying of content on your background video. That can be tricky! `vue-video-section` uses a combination of techniques to make this as simple as possible while still having the video stay nice and centered with a proper aspect ratio. As you can see in the demo (code is in the `./example` folder), you can just fill the `overlay-content` slot with whatever you like - I'm using Bootstrap's grid with just some basic content. You sorta don't even have to think about it.\n\nThe only caveat is that you'll want to set a predefined height for the section where you'll be showing the video. If this can be circumvented later I'll add it to the library. Right now it's really simple though - just set the `desktopHeight`, `mobileHeight`, and `mobileBreakpoint` props and you'll be all set. You can even have it change real time if you like.\n\nYou'll notice I'm providing three different filetypes in this example - that's because to get the best browser support you'll want to include an `mp4`, `.ogv`, and `webm` file - although you'll probably get by with just an `.mp4` for the most part. If the browser doesn't support your video, make sure to have the `posterSource` prop provided as it will fall back to that image. If *that* doesn't work, then some text will be shown letting the user know their browser isn't supported.\n\n### Usage Example\n\n```html\n\u003ctemplate\u003e\n  \u003cvue-video-section\n    :elementId=\"'header-background-video'\"\n    :ref=\"'header-background-video'\"\n    :mp4Source=\"require('../src/assets/videos/big_buck_bunny.mp4')\"\n    :oggSource=\"require('../src/assets/videos/big_buck_bunny.ogv')\"\n    :webmSource=\"require('../src/assets/videos/big_buck_bunny.webm')\"\n    :posterSource=\"require('../src/assets/images/poster.png')\"\n    :mobileBreakpoint=\"992\"\n    :desktopHeight=\"550\"\n    :mobileHeight=\"450\"\n    :playsinline=\"true\"\n    :loop=\"true\"\n    :autoplay=\"true\"\n    :autobuffer=\"true\"\n    :muted=\"true\"\n  \u003e\n    \u003cdiv slot=\"overlay-content\" class=\"overlay-content\"\u003e\n      \u003cdiv class=\"container py-4\"\u003e\n        \u003cdiv class=\"row justify-content-center\"\u003e\n          \u003cdiv class=\"col-lg-12 text-center\"\u003e\n            \u003ch3\u003e\u003cstrong\u003evue-video-section\u003c/strong\u003e\u003c/h3\u003e\n          \u003c/div\u003e\n        \u003c/div\u003e\n      \u003c/div\u003e\n      \u003cdiv class=\"container py-4\"\u003e\n        \u003cdiv class=\"row justify-content-center mb-4\"\u003e\n          \u003cdiv class=\"col-lg-6\"\u003e\n            \u003cp\u003eLorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita quam laboriosam iusto, sapiente, tempore eaque eos unde. Recusandae, officia perferendis tenetur in animi excepturi perspiciatis culpa amet quia voluptatibus tempora.\u003c/p\u003e\n          \u003c/div\u003e\n        \u003c/div\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/vue-video-section\u003e\n\u003c/template\u003e\n```\n\n### Notes\n\nUse the `playsinline` prop to control whether the video plays on mobile. If you set it to false then it will just show its `posterSource` image. Keep in mind that browsers are always changing their reaction to some of these properties so it might be a bit of a mixed bag concerning options like these. Right now, *this* is the way to stop the playing in mobile, but that may change in the future.\n\n### Props\n\n| prop | type | required | default | possible values | description |\n|---|---|---|---|---|---|\n| elementId | String | yes | | | This value will be set as the `id` of the instance |\n| ref | String | no | | | This value will be set as the `ref` of the instance |\n| mp4Source | Video | no | | | `require()` your `.mp4` file |\n| oggSource | Video | no | | | `require()` your `.ogv` file |\n| webmSource | Video | no | | | `require()` your `.webm` file |\n| posterSource | Image | no | | | `require()` your `image` file |\n| mobileBreakpoint | Number | no | 992 | | The width breakpoint between what you consider mobile and desktop |\n| desktopHeight | Number | no | 500 | | The height of the section in desktop |\n| mobileHeight | Number | no | 450 | | The height of the section in mobile |\n| playsinline | Boolean | no | true | | A Boolean attribute indicating that the video is to be played \"inline\", that is within the element's playback area |\n| loop | Boolean | no | true | | Loop the video |\n| autoplay | Boolean | no | true | | Autoplay the video |\n| autobuffer | Boolean | no | true | | Autobuffer the video |\n| muted | Boolean | no | true | | Start the video muted |\n\n### Methods\n\n| method | parameters | description |\n|---|---|---|\n| playVideo | | If you didn't autoplay the video, use this to start it |\n| pauseVideo | | Pause the video |\n\nNote - to call these methods set a `ref` on your `\u003cvue-video-section /\u003e`, something like this: `\u003cvue-video-section :ref=\"header-background-video\" /\u003e`. Then, manually call the methods like this in your javascript: `this.$refs['header-background-video'].play()`.\n\n### Slots\n\n| name | description |\n|---|---|\n| overlay-content | Use this to provide custom content overlayed over your video. |\n\n### SCSS Structure\n\n```scss\n.vue-video-section-wrapper {\n}\n\n.vue-video-section {\n  video[poster] {\n  }\n\n  \u0026__video-element {\n  }\n\n  \u0026__overlay-content-wrapper {\n    \u0026__background {\n    }\n\n    \u0026__content-wrapper {\n      \u0026__content {\n      }\n    }\n  }\n}\n```\n### Development\n\n``` bash\n# install dependencies\nnpm install\n\n# serve with hot reload\nnpm run watch\n\n# run the tests\nnpm run test\n\n# build demo page\nnpm run build:example\n\n# build library\nnpm run build:library\n\n# build everything and run tests\nnpm run build\n```\n\n### Other\n\nGo ahead and fork the project! Submit an issue if needed. Have fun!\n\nIf you use this in a project let me know and I'll make a list here linking to it.\n\n### License\n\n[MIT](http://opensource.org/licenses/MIT)\n\nPackaged with a mixture of [vue-lib-template](https://github.com/biigpongsatorn/vue-lib-template) and [vue-sfc-rollup](https://github.com/team-innovation/vue-sfc-rollup).","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjohndatserakis%2Fvue-video-section","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjohndatserakis%2Fvue-video-section","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjohndatserakis%2Fvue-video-section/lists"}