Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/pfelements/pf-parallax-video
Polymer 2.0 based custom-element to display video with parallax effect and overlays.
https://github.com/pfelements/pf-parallax-video
Last synced: 13 days ago
JSON representation
Polymer 2.0 based custom-element to display video with parallax effect and overlays.
- Host: GitHub
- URL: https://github.com/pfelements/pf-parallax-video
- Owner: PFElements
- License: mit
- Created: 2017-04-19T16:53:27.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2017-06-10T18:11:45.000Z (over 7 years ago)
- Last Synced: 2024-11-06T01:12:31.687Z (2 months ago)
- Language: HTML
- Size: 70.2 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# pf-elements
A Polymer 2.0 based collection of reusable web components
[](https://gitter.im/pf-elements/Lobby?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
[](https://www.webcomponents.org/element/PFElements/pf-calendar-events)
[](https://www.polymer-project.org)
## Demo
[Click here for Demo](https://pfelements.github.io/pf-parallax-video)
## Install the Polymer-CLI
First, make sure you have the [Polymer CLI](https://www.npmjs.com/package/polymer-cli) installed. Then run `polymer serve` to serve your application locally.
# PF Parallax Video
A Polymer 2.0 based custom-element to display video with parallax effect and overlays.
| Element Name | Latest Version (Bower) | Npm version | Build Status |
|--------------|------------------------|--------------|--------------|
| [pf-parallax-video](https://github.com/PFElements/pf-parallax-video) | [](https://badge.fury.io/gh/PFElements%2Fpf-parallax-video) | [](https://www.npmjs.com/package/pf-parallax-video) |[](https://travis-ci.org/PFElements/pf-parallax-video) |
## Learn more
See the list of elements, demos, and documentation by browsing this collection on webcomponents.org:
### [Take me to webcomponents.org ›](https://www.webcomponents.org/element/PFElements/pf-parallax-video)
---
#Usage
``
Custom property | Description | Default
----------------------------------------|-------------------------------------------|------------------------
`--pf-parallax-video-height` | Height of video div | 500px
`--on-pause-video-fade-color` | A transprent color when video is paused | rgba(0,0,0,.85)
`--overlay-pattren-img` | A pattren image on video | media/imgs/pattren.png
`--pause-button-img` | Video Pause button image | url(media/imgs/ic_pause.png) left top no-repeat
`--play-button-img` | Video Play button image | media/imgs/ic_play.png) left top no-repeat
`--title-heading-disply` | 'none' if you want to hide heading | block
`--title-heading-bg` | Background color of heading | rgba(0,0,0,.5)
`--title-text-color` | Heading text color | #fff
###Inline Demo
```html
```
###Known Issues
Google Chrome doesn't catch any videos over 5MB
so if your video is above 5mb ,it resulted redownload the video in loop
## Viewing Your Application
```
$ polymer serve
```
## Building Your Application
```
$ polymer build
```
This will create a `build/` folder with `bundled/` and `unbundled/` sub-folders
containing a bundled (Vulcanized) and unbundled builds, both run through HTML,
CSS, and JS optimizers.
You can serve the built versions by giving `polymer serve` a folder to serve
from:
```
$ polymer serve build/bundled
```
## Running Tests
```
$ polymer test
```
Your application is already set up to be tested via [web-component-tester](https://github.com/Polymer/web-component-tester). Run `polymer test` to run your application's test suite locally.
## Contributing
Comments, questions, suggestions, issues, and pull requests are all welcome.
### Get in touch with the team
Joing us at [](https://gitter.im/pf-elements/Lobby?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
- [Twitter](Follow @polymerio)
- [Facebook] (https://www.facebook.com/polymerjs)
- [Google+] (https://plus.google.com/116168214823506639166)
- [YouTube] (https://www.youtube.com/channel/UCDKqvDyAn_QTBvCPvrZKTkw)
- [Website] (https://polymerjs.io)
### Some ways to help:
- **Test the elements and provide feedback**: We would love to hear your feedback on anything related to the elements, like features, API and design. The best way to start is by trying them out. And to get a quick response, either drop a question/comment on the chat or open an issue in GitHub.
- **Report bugs**: File issues for the elements in their respective GitHub projects.
- **Send pull requests**: If you want to contribute code, check out the development instructions below.
We encourage you to read the [contribution instructions by GitHub](https://guides.github.com/activities/contributing-to-open-source/#contributing) also.
## License
MIT License