image

Sean and I will be in Istanbul next week.  We decided to throw an event to bring developers together and meet the tech community.  

If you’ve got a project you want to share, send a message or just bring your project. We’re emphasizing works of creative coding and tech art, but really any coding projects are welcome.  The event is held at Istanbul Hackerspace

Come hang out, say hi, have some pizza. If you have any questions feel free to get in touch on twitter or email (kawandeep at embed dot ly).  The event is next Wednesday, Feb 5th, from 19:00 to 21:30 at Istanbul Hackerspace.

Eventbrite link

Istanbul Hackerspace event link

More details:

Building tech art and creative applications can highlight new ways to use tech and inspire fresh ideas. Creative Hacks: Show and Tell will be an evening of informal ~5-10 minute talks to share projects with an emphasis on works in tech art and creative coding. We’ll hang out and have pizza and beers.

The event will kick off with talks by Igal Nassima and Kawandeep Virdee, discussing their own creative hacks. If you would like to present, send a message to kawandeep@embed.ly, or just bring your project. The event is sponsored by Embedly, who is in town visiting Istanbul.

Igal Nassima is a programmer and artist from Istanbul, Turkey. His work focuses on creating socially networked environments for communities to create and form their own bodies of work. He founded 319 Scholes in 2009 and is based in Brooklyn, NY. 

Kawandeep Virdee uses technology and art to explore ways we can create meaning and joy collectively. He is a developer at Embedly and is based in Boston, MA. 

The event will be held at Istanbul Hackerspace.  Here are some details on location.

Posted 2 months ago by whichlight
Embed This

Embedly is in Europe— specifically Berlin— for six weeks. We’ve already been here a couple weeks and it has been exciting getting to know the tech and startup scene here. We swung by Hy!, gave a talk at BerlinJS, hung out at Open Tech School. We’ve been working from the cafes at Oberholz and Betahaus, both hubs in the startup community.

Kawandeep at Hy! Berlin:

And @whichlight gets all the good gigs. #hydemo

We’ll be in Istanbul for the first week of February.  If you’re based there, or know of events we should check out, send us a message.

We’re looking to meet journalists, news organizations, and media companies on our travels.  With the release of Cards and the Button, we’ve hit the ground running to build media partnerships and spread the word about them- to see them in action, get feedback, and improve them.

contact:

Kawandeep: kawandeep [at] embed [dot] ly, @whichlight

Sean: sean [at] embed [dot] ly, @screeley

Posted 3 months ago by whichlight
Embed This
Sean giving a talk about Player.js for the BerlinJS meetup at co.up.  During the talk he presented a few simple demos using Player.js.  Check out the demos to see a few ways you can use Player.js:
Add timed captions to a youtube video.
Pull progress events from the video and display them on the page.  Note the progress bar along the top of the page, and the control buttons on the top left. 
Collect analytics on the video.
Build a music player.
It was wonderful seeing how engaged the community is here.  Lots of great questions and conversations after the talk, and just hours later people started digging into the code.  By the next morning we had a pull request.

Sean giving a talk about Player.js for the BerlinJS meetup at co.up.  During the talk he presented a few simple demos using Player.js.  Check out the demos to see a few ways you can use Player.js:

It was wonderful seeing how engaged the community is here.  Lots of great questions and conversations after the talk, and just hours later people started digging into the code.  By the next morning we had a pull request.

Posted 3 months ago by whichlight
Embed This

Sean is giving a talk today at the BerlinJS meetup: “Player.js: Control Media Iframes”.  From the talk blurb: 

Player.js is a library for programmatically running actions like play, pause, mute, and seek for a wide variety of media providers.

This talk will focus on building the media iframe, using postMessage and the Player.js library itself. We will also discuss some of the immediate possibilities like event listening for media analytics and playlist apps.

If you’re in the Berlin area and into JavaScript fun, swing by the meetup at the co.up coworking space.  Sean will also present a few examples of things you can make when you can programmatically control videos online.

The second talk for the night will be about creating Sqwiggle, and will go pretty deep into WebRTC.  I’m pumped about this talk after recent experiments playing with WebRTC. 

Posted 3 months ago by whichlight
Embed This

Happy holidays from Embedly

Posted 4 months ago by whichlight
Embed This
Tagged:
fun

Over the next few months Embedly will be rolling out a new embed format, better analytics and a JavaScript Player API. We wanted to let our customers know it was coming down the line and what to expect.

The landscape of embedding has changed drastically since we started over 4 years ago. Flash objects were replaced with iframes, SSL became more important, mobile and player APIs became easier to use.

We have incrementally tried to accommodate these changes, but have failed to really come up with a great solution.

We think we can do better and now we are going to give you a peek under the hood of the new features.

Unified Embed Code

Every Embed Code will have a similar layout. Here’s an example for Instagram’s embed that is already live:

<iframe src="//cdn.embedly.com/widgets/media.html?url=http%3A%2F%2Finstagram.com%2Fp%2FgGZegnh9Sg%2F&image=http%3A%2F%2Fdistilleryimage8.ak.instagram.com%2Fdc7cdbb2418811e3a4fc22000a1fc7c7_8.jpg&video=http%3A%2F%2Fdistilleryvesper8-8.ak.instagram.com%2Fdc7cdbb2418811e3a4fc22000a1fc7c7_101.mp4&video_secure=true&type=video%2Fmp4&schema=instagram" width="500" height="500" scrolling="no" frameborder="0"></iframe>

Yes, that’s a super long src URL, but it contains everything we need in order to embed the player. This allows us to render the embed quickly and not worry about making an HTTP call to get all the data we need.

There are a bunch of benefits that we get by implementing the universal embed, here are the top 4.

SSL Support

If you notice that the URL is protocol relative. Every embed will work on http or https. cdn.embedly.com is hosted on a globally distributed CDN and will always be fast and up.

If the embed itself supports SSL, we will display the media, otherwise we will use an image placeholder.

Currently we require developers to pay for SSL support on our Embed and Extract products, we will be phasing this out over the next few months.

Mobile Support

By hosting the iframe, we can intelligently decide whether the embed can be played on a mobile device. This also helps us determine whether to show the embed or an image representation of the embed in some cases.

Currently we require mobile embeds to be requested client side, so that we can sniff the browser agent. We can now use JavaScript to detect features, creating a much more reliable solution.

Player API Support

This one we have wanted to do for awhile. I’ve embedded an Instagram video above, open up the console and run the following code.

document.getElementById('embed').contentWindow.postMessage(JSON.stringify({method: 'play'}), 'http://cdn.embedly.com');

You will see the embed start to play. We currently have player API support for 5 different providers, so you will be able to programmatically play, pause and listen for progress events.

This wasn’t possible before, so we are really excited about it.

We have initially open sourced our Player.js and the Spec that is associated with it. We hope that others will implement this messaging protocol in the future.

What can you build you ask? Here’s a simple music player we built with the new embed and player.js: embed.ly/docs/tutorials/music

Better Analytics

Right now our dashboard is a bit sparse, just showing usage and some popular domains. Pretty soon we will give you in depth Analytics about what embed was seen the most, how many plays it got, the average duration of the play and so much more.

We feel this will give developers better insights about what media is working on their site.

A few other things that we have thought about.

Responsive

With the ever changing layouts and designs we wanted to make sure that content will look good at any size. We have designed the iframe container to be responsive and infinitely sizable.

XSS Security

By putting everything within an iframe we are able to limit the embed’s access to your page.

Currently we also charge for this feature, we will be phasing this out over the next few months as well.

You can start using this feature now, by adding better=true to your API requests like so:

http://api.embed.ly/1/oembed?better=true&url=http%3A%2F%2Fvimeo.com%2F18150336

With your help we hope to get all the edge cases sorted out quickly and create the best embedding experience available. We are stoked about this and hope you are too.

If you have any questions, please don’t hesitate to contact support@embed.ly.

Sean

Posted 5 months ago by screeley
Embed This

At Embedly, we work with many different integrations, APIs, and meta tags to generate embeds. Most recently, we launched an effort to support Twitter cards which you can now add to the list of ways to automatically generate an embed from metadata in a web page. In fact, its a surging 4th out of 5 in the most commonly used method to expose a way to generate an embed, this is pretty significant considering Twitter cards have only been available for the last 4 months, while other methods like the meta video_src tag (3rd) has been around for years.

image

Enlarge | Data

We support a good number of content providers through our API directly, this means that we have tested things like resizing, auto-play, and mobile compatibility before adding them to our official list. Our research started first as a way to generate more provider integrations, but we quickly realized that you can’t blindly rely on meta tags or APIs to work properly, the review process we have in place needs to happen, otherwise you end up providing embeds that don’t load or just auto-play videos.

The stats we took came from 1820 domains called through Embedly that provide a way to generate their embed from metadata, here is the breakdown:

  • 17% Meta video_src tags
  • 68% Open Graph video tags
  • 16% Twitter cards
  • 22% oEmbed JSON API
  • 6% oEmbed XML API

* Note: Aggregate exceeds 100% due to some sites supporting multiple methods as shown in chart above. Data

It’s not unusual to see that Open Graph is the clear leader in this space due to Facebook being the driving force behind it. I was surprised to see that oEmbed took 2nd considering its a lot more work to create an API, than most of the other methods. As mentioned previously, Twitter Cards are grabbing their share of integrations quickly as they own real-time social. I’m going to bet they will grab at least 40% by the end of next year.

Not rocket science, but we hope it was worth the read. Stay classy, Embedders!

Posted 5 months ago by artgibby
Embed This

Millions of URLs a day go through the Embedly API, which provides a breadth of data to measure characteristics of embeds and their parent sites. How big are the images? How long are the descriptions and titles?

John over at the Embedly Data Analytics Research Lab took a sample of embeds from our logs and measured the distributions over a few features. These are URLs being shared on blogs, apps, wherever Embedly is integrated. Here’s what we found.

Results

The average title length is between 40 and 60 characters. There is also a peak just above 100. One reason for this peak could be that sites impose a cut off for their titles.

Title Graph

Next we’ll look at images from the URLs, in particular their dimensions. You can see two peaks for the image width- one at around 600px and another just above 400px- and two peaks for the image height- one at around 350px and another around 600px. Note that Instagram images are 612x612, hence the spike at that bin. That the second peak for height is a bit lower than width makes sense given that common aspect ratios have larger widths than heights. 

Image Width

Image Height

Descriptions have a much wider distribution with a couple peaks around 100 and 250.  

Description Length

The provider length peaks just above 5 characters. A provider is the name of the URL source, for example, any of these sites.  It is generally the domain name. 

Provider Length

Maxwidth and maxheight are a bit different from the other characteristics we measured because they have more to do with the sites and apps that embed content using Embedly. These are attributes you can include in your call to limit the size of the embed. You can tell many sites and apps limit their embed widths to 500. The heights have a wider distribution around 300, but it should be noted that far fewer people constrain by height compared to width. 64% of requests included a maxwidth parameter, while only 4% included maxheight. 

Maxwidth

Maxheight

How this is useful

Content creators can get an idea of the range of how others are formatting the size of their posts and build their content accordingly. If you’re trying to figure out the best dimensions for images, you can play it safe and choose the most common sizes in the distribution. In addition, it’s clear many apps are built to embed content of a maximum width of 500px. 

Embedders can get a feel for the distribution of embed sizes and plan to create appropriate templates for the embeds. For instance, make sure your templates look great with titles of 100 characters. 

If you’re designing user interfaces around content, we hope these measurements of design and copy help you out. 

Posted 5 months ago by whichlight
Embed This

We have been busy taking in the foliage of fall, but have not forgot about adding some spanking new providers. You can now embed various things like animated videos, your hackpad, and a fresh new story.

Here is a quick breakdown of the new additions to our supported providers:

Try these new providers out and shoot us a note with the popular providers you are interested in, support@embed.ly. Have a great All Hallow’s Eve!

Check out embeds right in the post:

Cloudup

Cloudup

GoAnimate

The DevOps Ninjas

23Video

GoMorgen Gadget: TV-udbydere, Netflix ekstra features, Surface Pro 2 og mere! - Living Smart TV

Talely

Photocontest

NYTimes

Video: Scalded by Coffee, Then News Media

Posted 5 months ago by artgibby
Embed This
Lesson.ly made this awesome Embedly gif!
lessonly:

When Lesson.ly first launched, our lesson-authoring tool supported various image types, rich text, and YouTube videos. This worked well for awhile, but, as our client list has grown, so has the need for a wider array of video-embedding options.
Enter Embedly, the make-everything-easier API.
With our newest Embedly integration, you can grab videos from, well, everywhere, and add them to your lessons with a snap.
Many thanks to you, our clients, for the feedback. This product is succeeding because you’re guiding it in a great direction.
—Max at Lesson.ly

Lesson.ly made this awesome Embedly gif!

lessonly:

When Lesson.ly first launched, our lesson-authoring tool supported various image types, rich text, and YouTube videos. This worked well for awhile, but, as our client list has grown, so has the need for a wider array of video-embedding options.

Enter Embedly, the make-everything-easier API.

With our newest Embedly integration, you can grab videos from, well, everywhere, and add them to your lessons with a snap.

Many thanks to you, our clients, for the feedback. This product is succeeding because you’re guiding it in a great direction.

Max at Lesson.ly

(Source: lessonly)

Posted 6 months ago by whichlight
Embed This