Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/zafree/tedvid
TEDvid - TED style hero-video
https://github.com/zafree/tedvid
Last synced: 4 months ago
JSON representation
TEDvid - TED style hero-video
- Host: GitHub
- URL: https://github.com/zafree/tedvid
- Owner: zafree
- License: mit
- Created: 2016-06-23T09:18:29.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2016-06-23T10:15:28.000Z (over 8 years ago)
- Last Synced: 2024-08-01T02:29:50.151Z (7 months ago)
- Language: JavaScript
- Homepage: https://zafree.github.io/tedvid
- Size: 91.8 KB
- Stars: 22
- Watchers: 4
- Forks: 6
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# TEDvid - TED style hero-video
TEDvid is a TED style hero-video that goes sticky when you scroll your shit/bar/page, as seen on [TEDtalks](https://www.ted.com/talks/elon_musk_the_mind_behind_tesla_spacex_solarcity). Applicable only for Youtube and Vimeo.
### Demo
https://zafree.github.io/tedvid
### Dependencies
1. [JQuery](https://code.jquery.com/jquery-2.2.4.min.js)
2. [Waypoints](https://cdnjs.cloudflare.com/ajax/libs/waypoints/3.1.1/jquery.waypoints.min.js)
Note:
I used Bootstrap Grid here. You can use any other. If you need help regarding this then you can create an issue or let me know directly.
### How
1. Link CSS files to your site or application
```html
```
2. Link JS files to your site or application (add `` to bottom of page)
```html
<script src="https://code.jquery.com/jquery-2.2.4.min.js">
```
3. Load Vimeo/Youtube API `` to bottom of `<head>`
```html
<head>
...
<!--load if vimeo -->
<script src="https://f.vimeocdn.com/js/froogaloop2.min.js">
```
4. Set `data-provider=""` and set your video ID `74605993`. (Keep `player_id=vimeo` for vimeo `src`)
```html
```
or
```html
```
5. Set your poster image `src` (Image Ration 16:9 for better serve)
```html
```
6. And finally you can edit the content as you want. Wow.
### Why
It's the TED style that goes sticky when you scroll your page. That's really aewsome. Wow.
### Where
TEDvid should (in theory) work in all relevant browsers (ie9+). If not, create an issue! Thanks!
### Who
Written by Zafree, made better by you.
### Contribute
[@obiPlabon](https://github.com/obiplabon)