Embedding Videos and Rich media using Embedly and Google AMP.
Google AMP is:
The Accelerated Mobile Pages (AMP) Project is an open source initiative that embodies the vision that publishers can create mobile optimized content once and have it load instantly everywhere.
Basically Facebook's instant articles for everyone. AMP is relatively easy to set up and Embedly will work with the amp-frame out of the box.
Positioning Restriction
From the amp-frame docs:
`amp-iframe` may not appear close to the top of the document (except for iframes that use placeholder as described below). They must be either 600px away from the top or not within the first 75% of the viewport when scrolled to the top – whichever is smaller.So you should use the placeholder as described below.
Getting Started
There are two ways you can do this. You can either create the amp-frame from the oEmbed response or deconstruct the iframe if you already have it saved, we will provide JavaScript code to do both.
At the end you want to turn:
<iframe class="embedly-embed"
width="500"
height="281"
frameborder="0"
src="//cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fplayer.vimeo.com%2Fvideo%2F18150336&url=https%3A%2F%2Fvimeo.com%2F18150336&image=http%3A%2F%2Fi.vimeocdn.com%2Fvideo%2F117311910_1280.jpg&key=internal&type=text%2Fhtml&schema=vimeo"
scrolling="no" frameborder="0" allowfullscreen></iframe>
Into:
<amp-iframe width=500 height=281
sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox"
layout="responsive"
frameborder="0"
src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fplayer.vimeo.com%2Fvideo%2F18150336&url=https%3A%2F%2Fvimeo.com%2F18150336&image=http%3A%2F%2Fi.vimeocdn.com%2Fvideo%2F117311910_1280.jpg&key=internal&type=text%2Fhtml&schema=vimeo">
<amp-img layout="fill" src="https://i.vimeocdn.com/video/117311910_1280.jpg" placeholder></amp-img>',
</amp-iframe>
From oEmbed
The easiest way is to just build the amp-frame from the oEmbed API. Here's an example using embedly-jquery:
var urls = [
'https://www.youtube.com/watch?v=rVlhMGQgDkY',
'https://vine.co/v/irMdgU253HU',
'https://streamable.com/25ws',
'https://www.instagram.com/p/BA4-invoXXH/',
'http://vimeo.com/18150336'
];
$.embedly.oembed(urls)
.then(function(results) {
// Reduce the response to only video, rich or photo types and remove
// link or error responses.
return results.reduce(function(array, oembed) {
var html;
if (oembed.type === 'rich' || oembed.type === 'video') {
// Use the amp-frame if it's a
// We need to pull the src out of the iframe.
var match = (/src=\"([^\"]+)\"/).exec(oembed.html);
if (match.length === 2) {
// Grab the src.
var src = 'https://'+match[1];
// We should always have a placeholder, otherwise we need to worry about the
// position of the iframe in relationship to the top of the page. If there
// is no thumbnail_url then we should use a default placeholder. Please
// add your own placeholder.
var placeholder = oembed.thumbnail_url;
if (!placeholder) {
placeholder = 'https://cdn.embed.ly/logos/embedly-powered-large-light.png';
}
// Build the amp-frame.
html = [
'<amp-iframe width=' + oembed.width,
'height=' + oembed.height,
'layout="responsive"',
'frameborder="0"',
'sandbox="allow-scripts allow-same-origin allow-popups"',
'src="' + src + '">',
'<amp-img layout="fill" src="' + placeholder + '" placeholder></amp-img>',
'</amp-iframe>'
].join(' ');
}
} else if (oembed.type === 'photo') {
// Use the amp-img here.
html = [
'<amp-img src="' + oembed.url + '"',
'width=' + oembed.width,
'height=' + oembed.height,
'layout="responsive" ></amp-img>'
].join(' ');
}
if (html) {
array.push(html);
}
return array;
}, []);
})
.then(function(results){
// add the emebds.
var $embeds = $('.embeds');
results.forEach(function(html){
$embeds.append([
'<div class="embed">',
html,
'</div>'
].join(''));
});
});
Demo!
The above code is used to create the this demo. You will see the embeds progressively load. You can see the full code here.
Replace Iframes
If you have already saved off the iframe and do not have access to the oEmbed response, the Embedly iframe has everything you need to create the amp-frame. The code looks like:
var ampify = function(iframe){
var src = (/src=\"([^\"]+)\"/).exec(iframe)[1],
width = (/width=\"([^\"]+)\"/).exec(iframe)[1],
height = (/height=\"([^\"]+)\"/).exec(iframe)[1],
path = src.split('?')[1];
// Embedly stores the URL of a thumbnail of embed in the SRC of the iframe.
// This decomposes that query sting to a hash.
var query = path.split('&').reduce(function(query, arg){
var parts = arg.split('=').map(decodeURIComponent);
query[parts[0]] = parts[1];
return query;
}, {});
// We should always use a placeholder.
var placeholder = query.image;
if (!placeholder){
placeholder = 'https://cdn.embed.ly/logos/embedly-powered-large-light.png';
}
return [
'<amp-iframe width=' + width,
'height=' + height,
'layout="responsive"',
'frameborder="0"',
'sandbox="allow-scripts allow-same-origin allow-popups"',
'src="https:' + src + '">',
'<amp-img layout="fill" src="' + placeholder + '" placeholder></amp-img>',
'</amp-iframe>'
].join(' ');
};
// Basic use:
var html = amplifiy('<iframe class="embedly-embed" src="//cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fplayer.vimeo.com%2Fvideo%2F18150336&url=https%3A%2F%2Fvimeo.com%2F18150336&image=http%3A%2F%2Fi.vimeocdn.com%2Fvideo%2F117311910_1280.jpg&key=internal&type=text%2Fhtml&schema=vimeo" width="500" height="281" scrolling="no" frameborder="0" allowfullscreen></iframe>');
Demo
The above code is used to create the this demo. And you can see the full code here.