Skip to content

Instantly share code, notes, and snippets.

@herrernst

herrernst/oembed.html

Created June 13, 2018 16:27
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save herrernst/440c74c5ed245a7336df3ffa5be08d42 to your computer and use it in GitHub Desktop.
Save herrernst/440c74c5ed245a7336df3ffa5be08d42 to your computer and use it in GitHub Desktop.
Download ZIP
oembed
Raw
oembed.html
<!doctype html>
<style>
[data-oembed] iframe {
display: block;
border: 0 none;
}
</style>
<h1>oembed example</h1>
<p>WTF most oembed endpoints don't support CORS, so have to fetch from server; there are services: https://github.com/itteco/oembed-api</p>
<div data-oembed="https://www.youtube.com/oembed?url=http%3A//youtube.com/watch%3Fv%3DM3r2XDceM6A&format=json"></div>
<div data-oembed="https://publish.twitter.com/oembed?url=https%3A%2F%2Ftwitter.com%2FInterior%2Fstatus%2F507185938620219395"></div>
<div data-oembed="https://www.facebook.com/plugins/video/oembed.json/?url=https%3A%2F%2Fwww.facebook.com%2Ffacebook%2Fvideos%2F10153231379946729%2F"></div>
<script>
Array.prototype.forEach.call(document.querySelectorAll("[data-oembed]"), function (el) {
const url = el.dataset.oembed;
fetch(url)
.then(response => response.json())
.then(json => {
const useIFrame = true
if (useIFrame) {
const ifr = document.createElement("iframe");
if ("width" in json) ifr.setAttribute("width", json["width"])
if ("height" in json) ifr.setAttribute("height", json["height"])
const html = "<!doctype html>" +
"<style>body{margin:0}</style>" +
json["html"]
el.appendChild(ifr)
const useSrcDoc = true
if (useSrcDoc) {
ifr.setAttribute("srcDoc", html)
} else {
ifr.contentDocument.open()
ifr.contentDocument.write(html)
ifr.contentDocument.close(html)
}
} else {
el.innerHTML = json["html"]
}
})
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment