A Polymer 2.0 based collection of reusable web components
First, make sure you have the Polymer CLI installed. Then run polymer serve to serve your application locally.
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 |  |
 |
 |
See the list of elements, demos, and documentation by browsing this collection on webcomponents.org:
#Usage
`<pf-parallax-video id="pf-parallax" title="PF PARALLAX VIDEO" videoposter="/media/poster.PNG" src1="../media/main.mp4" parallaxvalue="0.30"
`
| 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
<pf-parallax-video id="pf-parallax"
title="PF PARALLAX VIDEO"
videoposter="/media/poster.PNG"
src1="../media/main.mp4"
parallaxvalue="0.30"
></pf-parallax-video>###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
$ polymer serve
$ 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
$ polymer test
Your application is already set up to be tested via web-component-tester. Run polymer test to run your application's test suite locally.
Comments, questions, suggestions, issues, and pull requests are all welcome.
Joing us at
- [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)
- 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 also.
MIT License