tedvid
tedvid copied to clipboard
zafree
TEDvid - TED style hero-video
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. Applicable only for Youtube and Vimeo.
Demo
https://zafree.github.io/tedvid
Dependencies
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
- Link CSS files to your site or application
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="css/tedvid.min.css">
- Link JS files to your site or application (add
<script>to bottom of page)
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/3.1.1/jquery.waypoints.min.js"></script>
<script src="js/tedvid.js"></script>
- Load Vimeo/Youtube API
<script>to bottom of<head>
<head>
...
<!--load if vimeo -->
<script src="https://f.vimeocdn.com/js/froogaloop2.min.js"></script>
<!--load if youtube -->
<script src="https://www.youtube.com/iframe_api"></script>
</head>
- Set
data-provider=""and set your video ID74605993. (Keepplayer_id=vimeofor vimeosrc)
<iframe data-provider="vimeo" class="embed-responsive-item" src="https://player.vimeo.com/video/74605993?api=1&player_id=vimeo" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
or
<iframe data-provider="youtube" class="embed-responsive-item" src="https://www.youtube.com/embed/7d16CpWp-ok?enablejsapi=1&html5=1&showinfo=0&rel=0&autohide=0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
- Set your poster image
src(Image Ration 16:9 for better serve)
<img id="Video__poster" class="Video__poster" src="imgs/poster.jpg" alt="..." />
- 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.
zafree