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: 2 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 (about 8 years ago)
Default Branch: master
Last Pushed: 2016-06-23T10:15:28.000Z (about 8 years ago)
Last Synced: 2024-01-23T19:09:48.565Z (5 months ago)
Language: JavaScript
Homepage: https://zafree.github.io/tedvid
Size: 91.8 KB
Stars: 23
Watchers: 4
Forks: 6
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE

Lists

awesome-stars - tedvid - TEDvid - TED style hero-video (JavaScript)

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>
...

<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)