├── README.md
├── embetter-builder.js
├── embetter.css
├── embetter.js
├── favicon.ico
├── index.html
├── playlist
└── index.html
├── sample-data
├── bandcamp-album.html
├── bandcamp-track.html
├── imgur-gallery.html
├── imgur-gifv.html
├── imgur.html
├── mixcloud.json
├── slideshare.json
├── soundcloud-set-oembed.json
├── soundcloud-set.json
├── soundcloud-track-oembed.json
├── soundcloud-track.json
├── ustream-recorded.json
├── ustream.json
├── vimeo.json
└── vine.json
└── vendor
├── normalize.css
├── reqwest.min.js
└── skeleton.css
/README.md:
--------------------------------------------------------------------------------
1 | # Embetter
2 |
3 | #### Because iframes are janky
4 |
5 | Media embeds can quickly bog your site down, so let's lazy-load them! The basic Embetter player consists of a tiny template with a progressively-enhanced thumbnail image, a play button, and the essential data needed to construct the responsive iframe embed code. Add a dash of javascript & css to your web page, and you have a simple, lightweight media player.
6 |
7 | #### Mobile-happy
8 |
9 | Since media generally can't autoplay on mobile devices, we work around that by populating the embed's iframe when an Embetter player is at least partially visible in the mobile viewport. By doing this, we still lazy-load (and unload) as much as possible, but each embed only needs a single tap to start playing.
10 |
11 | #### Demo
12 |
13 | Check out the [demo](http://cacheflowe.github.io/embetter) with the embed builder, see an [auto-playthrough playlist](http://cacheflowe.github.io/embetter/playlist/#/2-step-chunes/oG_La5R9HQk|C4xDtB_9SZM|QFxdkHRpz7Q|0Yt_Ts26PLM|VIOMoOYOTQQ|IlNNrXzi60o|F73WxhZPvJ4|4_uggscguzs|5sDW7AMoHVs|gXCN1DhHTZA|xy3RjUX3UeQ|ewHYBOCypXc|uNWTlETtuGM|B1JK9FJf0cE|mIE92NdE4ww|qpa09-OuZek|IqrYbXNnGmc|yUrOSCkoJ6w|VDqBbSBjsuw|nves7T9ThZI|OhKypM3H0iY|Z7nvb8kTPl8|Shtc5vtjui0|Aw4I7-jHw7s|YDi9i5JT5Co|lZ3KM5E8wl8|E48rwBeHf-A|MFu-PSawX1k|SgaHZIobQms|oG_La5R9HQk|mapbdUAbcrY) or see it out [in the wild](http://plasticsoundsupply.com/video).
14 |
15 | #### Usage
16 |
17 | Add Embetter embed codes to your markup:
18 |
19 | ```
20 |
21 |
22 |
23 | ```
24 |
25 | Tell Embetter's JavaScript to activate any players on the page, or within a specific container. Be sure to pass in the 3rd-party services you'd like to enable:
26 |
27 | ```
28 | var embedServices = [
29 | window.embetter.services.youtube,
30 | window.embetter.services.vimeo,
31 | window.embetter.services.soundcloud
32 | ];
33 | window.embetter.utils.initMediaPlayers(document.body, embedServices);
34 | ```
35 |
36 | Dispose any existing players before you switch pages in your single-page app:
37 |
38 | ```
39 | window.embetter.utils.disposePlayers();
40 | ```
41 |
42 | Stop all active embeds, in case you need to:
43 |
44 | ```
45 | window.embetter.utils.unembedPlayers(document.body)
46 | ```
47 |
48 | Get media complete callbacks from YouTube, Vimeo and Soundcloud embeds via their iframe .js APIs. This is useful to scroll your page to the next player contained in an element with `data-embetter-playlist="true"`.
49 |
50 | ```
51 | window.embetter.apiEnabled = true;
52 | window.embetter.apiAutoplayCallback = function(playerEl) {
53 | window.scrollTo(0, window.scrollY - playerEl.offsetTop + 50);
54 | };
55 |
56 | ```
57 |
58 | #### How it works
59 |
60 | On it's own, an Embetter embed code is just a clickable thumbnail that takes you to the source 3rd-party media page. After activation via `initMediaPlayers`, each Embetter player becomes clickable and has all of the data it needs to construct an iframe, which stretches to match the size of the preview thumbnail. This information is stored as a data attribute on the `.embetter` wrapper div and is extracted via API calls, regex capturing, or metatag scraping. Additional operations on this data helps us handle special cases per service. The `embetter-builder.js` file contains the logic to properly extract the necessary data for each type of embed, and operates on URLs, CORS-enabled APIs (usually oembed services), or locally-`curl`ed demo files to explain and test the behavior. Most likely, you'd want to port this behavior to your backend if you need to do this on the fly. Some services have several types of embeds that require different data to be stored, and some have extra css that adds custom layout and state behavior. When it comes down to it, however, we only need a single string (an id of some kind) to interpolate into a predefined iframe src template per service.
61 |
62 |
63 | ## Supported services & URL formats:
64 |
65 | ##### YouTube
66 | * Formats:
67 | * `https://www.youtube.com/watch?v=Fb4bCgWkZRc`
68 | * `https://youtube.com/watch?v=Fb4bCgWkZRc`
69 | * `https://youtube.com/v/Fb4bCgWkZRc`
70 | * `http://youtu.be/Fb4bCgWkZRc`
71 | * Regex:
72 | * `/(?:.+?)?(?:youtube\.com\/v\/|watch\/|\?v=|\&v=|youtu\.be\/|\/v=|^youtu\.be\/)([a-zA-Z0-9_-]{11})+/`
73 | * Captures id: `Fb4bCgWkZRc`
74 | * API URL:
75 | * None needed
76 | * Thumbnail aspect ratio:
77 | * 4:3
78 |
79 | ##### Vimeo
80 | * Formats:
81 | * `https://vimeo.com/99276873`
82 | * Regex:
83 | * `/(?:https?:\/\/)?(?:w{3}\.)?vimeo.com\/(\S*)(?:\/?|$|\s|\?|#)/`
84 | * Captures id: `99276873`
85 | * API URL (CORS/jsonp enabled):
86 | * `https://vimeo.com/api/v2/video/` + videoId + `.json`
87 | * Thumbnail aspect ratio:
88 | * Variable (matches uploaded media)
89 |
90 | ##### Soundcloud
91 | * Formats:
92 | * `https://soundcloud.com/itemsandthings/chlo-live-items-things`
93 | * `https://snd.sc/cacheflowe/sets/automate-everything-2005`
94 | * `https://soundcloud.com/groups/berlin-minimal-techno`
95 | * Regex:
96 | * `/(?:https?:\/\/)?(?:w{3}\.)?(?:soundcloud.com|snd.sc)\/([a-zA-Z0-9_-]*(?:\/sets)?(?:\/groups)?\/[a-zA-Z0-9_-]*)(?:\/?|$|\s|\?|#)/`
97 | * Captures path: `itemsandthings/chlo-live-items-things` or `cacheflowe/sets/automate-everything-2005`
98 | * API URL (CORS/jsonp enabled):
99 | * `http://api.soundcloud.com/resolve.json?url=` + mediaUrl + `&client_id=` + YourClientID + `&callback=jsonpResponse`
100 | * Thumbnail aspect ratio:
101 | * 1:1
102 |
103 | ##### Instagram
104 | * Formats:
105 | * `https://instagram.com/p/xekoQiQY3-/`
106 | * `http://instagr.am/p/xekoQiQY3-/`
107 | * Regex:
108 | * `/(?:https?:\/\/)?(?:w{3}\.)?(?:instagram.com|instagr.am)\/p\/([a-zA-Z0-9-_]*)(?:\/?|$|\s|\?|#)/`
109 | * Captures id: `xekoQiQY3-`
110 | * API URL:
111 | * None needed
112 | * Thumbnail aspect ratio:
113 | * 1:1
114 |
115 | ##### Giphy
116 | * Formats:
117 | * `https://giphy.com/gifs/ken-lee-3ESp1RAn7PjOw`
118 | * `https://giphy.com/gifs/3ESp1RAn7PjOw`
119 | * Regex:
120 | * `/(?:https?:\/\/)?(?:w{3}\.)?giphy.com\/gifs\/([a-zA-Z0-9_\-%]*)(?:\/?|$|\s|\?|#)/`
121 | * Captures id: `3ESp1RAn7PjOw`
122 | * API URL:
123 | * None needed
124 | * Thumbnail aspect ratio:
125 | * Variable (matches original .gif)
126 |
127 | ##### Mixcloud
128 | * Formats:
129 | * `https://www.mixcloud.com/Davealex/davealex-30m-electro-2010/`
130 | * Regex:
131 | * `/(?:https?:\/\/)?(?:w{3}\.)?(?:mixcloud.com)\/(.*\/.*)(?:\/?|$|\s|\?|#)/`
132 | * Captures id: `Davealex/davealex-30m-electro-2010`
133 | * API URL (CORS/jsonp enabled):
134 | * `http://www.mixcloud.com/oembed/?url=` + mediaUrl + `&format=jsonp`
135 | * Thumbnail aspect ratio:
136 | * 1:1
137 |
138 | ##### Dailymotion
139 | * Formats:
140 | * `http://www.dailymotion.com/video/x2681lh_the-ultimate-fainting-fails-compilation_fun`
141 | * `http://www.dailymotion.com/video/x2681lh`
142 | * Regex:
143 | * `/(?:https?:\/\/)?(?:w{3}\.)?dailymotion.com\/video\/([a-zA-Z0-9-_]*)(?:\/?|$|\s|\?|#)/`
144 | * Captures id: `x2681lh`
145 | * API URL:
146 | * None needed
147 | * Thumbnail aspect ratio:
148 | * 4:3
149 |
150 | ##### CodePen
151 | * Formats:
152 | * `http://codepen.io/nicoptere/pen/mgpxB`
153 | * `http://codepen.io/nicoptere/embed/mgpxB`
154 | * Regex:
155 | * `/(?:https?:\/\/)?(?:w{3}\.)?(?:codepen.io)\/([a-zA…A-Z0-9_\-%]*\/[a-zA-Z0-9_\-%]*)(?:\/?|$|\s|\?|#)/`
156 | * Captures id: `nicoptere/embed/mgpxB`
157 | * API URL:
158 | * None needed
159 | * Thumbnail aspect ratio:
160 | * 1024:600
161 |
162 | ##### Shadertoy
163 | * Formats:
164 | * `https://www.shadertoy.com/view/4dfGzs`
165 | * Regex:
166 | * `/(?:https?:\/\/)?(?:w{3}\.)?shadertoy.com\/view\/([a-zA-Z0-9_\-%]*)(?:\/?|$|\s|\?|#)/`
167 | * Captures id: `4dfGzs`
168 | * API URL:
169 | * None needed
170 | * Thumbnail aspect ratio:
171 | * 16:9
172 |
173 | ##### Bandcamp
174 | * Formats:
175 | * `https://swindleuk.bandcamp.com/album/swindle-walters-call`
176 | * `https://swindleuk.bandcamp.com/track/summer-fruits`
177 | * Regex:
178 | * `/(?:https?:\/\/)?(?:w{3}\.)?([a-zA-Z0-9_\-]*.bandcamp.com\/(album|track)\/[a-zA-Z0-9_\-%]*)(?:\/?|$|\s|\?|#)/`
179 | * Captures id: `album=2659930103` and `track=1312622119`
180 | * API URL:
181 | * Must scrape metatags from the album/track page.
182 | * Thumbnail aspect ratio:
183 | * 1:1
184 |
185 | ##### Ustream
186 | * Formats:
187 | * `http://www.ustream.tv/channel/almost-home-adoptions-cat-cam`
188 | * `http://www.ustream.tv/recorded/69957739`
189 | * `http://www.ustream.tv/NASAHDTV`
190 | * Regex:
191 | * `/(?:https?:\/\/)?(?:w{3}\.)?(?:ustream.tv|ustre.am)\/((?:(recorded|channel)\/)?[a-zA-Z0-9_\-%]*)(?:\/?|$|\s|\?|#)/`
192 | * Captures id: `channel/almost-home-adoptions-cat-cam` or `recorded/69957739` or `NASAHDTV`
193 | * API URL:
194 | * `http://www.ustream.tv/oembed?url=` + mediaUrl
195 | * Thumbnail aspect ratio:
196 | * 4:3 most of the time...
197 | * 10:9 or possibly otherwise
198 |
199 | ##### Imgur
200 | * Formats:
201 | * `http://imgur.com/gallery/iKQET`
202 | * `http://imgur.com/USbuZSo`
203 | * Regex:
204 | * `/(?:https?:\/\/)?(?:w{3}\.)?(?:imgur.com)\/((?:gallery\/)?[a-zA-Z0-9_\-%]*)(?:\/?|$|\s|\?|#)/`
205 | * Captures id: `gallery/iKQET` and `USbuZSo`
206 | * API URL:
207 | * `http://api.imgur.com/oembed.json?url=` + mediaUrl
208 | * Must scrape metatags from the Imgur page, since the oembed service doesn't provide a thumbnail URL.
209 | * Thumbnail aspect ratio:
210 | * Variable (matches uploaded media)
211 |
212 | ##### Vine
213 | * Formats:
214 | * `https://vine.co/v/eWlADOIAEAd`
215 | * Regex:
216 | * `/(?:https?:\/\/)?(?:w{3}\.)?vine.co\/v\/([a-zA-Z0-9-]*)(?:\/?|$|\s|\?|#)/`
217 | * Captures id: `eWlADOIAEAd`
218 | * API URL:
219 | * `https://vine.co/oembed/` + vineId + `.json`
220 | * Thumbnail aspect ratio:
221 | * 1:1
222 |
223 | ##### Slideshare
224 | * Formats:
225 | * `http://www.slideshare.net/HunterLoftis1/forwardjs-we-will-all-be-game-developers`
226 | * Regex:
227 | * `/(?:https?:\/\/)?(?:w{3}\.)?slideshare.net\/([a-zA-Z0-9_\-%]*\/[a-zA-Z0-9_\-%]*)(?:\/?|$|\s|\?|#)/`
228 | * Captures id: `eWlADOIAEAd`
229 | * API URL:
230 | * `http://www.slideshare.net/api/oembed/2?url=https://www.slideshare.net/` + slideshowId + `&format=json'`
231 | * Thumbnail aspect ratio:
232 | * 170:96
233 | * 170:121
234 | * 170:128
235 | * Variable, but 170px width
236 |
237 | ##### Kuula
238 | * Formats:
239 | * `https://kuula.co/post/7fWCb`
240 | * Regex:
241 | * `/(?:https?:\/\/)?(?:w{3}\.)?kuula.co\/post\/([a-zA-Z0-9_\-%]*)(?:\/?|$|\s|\?|#)/`
242 | * Captures id: `7fWCb`
243 | * API URL:
244 | * None needed
245 | * Thumbnail aspect ratio:
246 | * 1:1
247 |
248 |
249 |
250 | ### TODO:
251 |
252 | * More documentation about how each service gathers IDs to create iframes - add iframe src construction example
253 | * Usage documentation - full API
254 | * Add info about special per-service handling
255 | * Make Slideshare iframe responsive to thumbnail aspect ratio
256 |
--------------------------------------------------------------------------------
/embetter-builder.js:
--------------------------------------------------------------------------------
1 | (function(){
2 | var embetter = window.embetter;
3 |
4 | /////////////////////////////////////////////////////////////
5 | // BUILD PLAYER FROM PASTE
6 | /////////////////////////////////////////////////////////////
7 | embetter.utils.buildPlayerFromServiceURL = function(el, string, services) {
8 | for (var i = 0; i < services.length; i++) {
9 | var service = services[i];
10 | if(string.match(service.regex) != null) {
11 | service.buildFromText(string, el);
12 | }
13 | }
14 | };
15 |
16 | embetter.utils.playerCode = function(htmlStr) {
17 | var entityMap = {
18 | "<": "<",
19 | ">": ">",
20 | };
21 | function escapeHtml(string) {
22 | return String(string).replace(/[<>]/g, function (s) {
23 | return entityMap[s];
24 | });
25 | }
26 | htmlStr = htmlStr.replace(/\>\s+\<'); // remove whitespace between tags
27 | return '
22 |