I have a personal website for image hosting amoung other things and I'm trying to implement oEmbed for discord (discord.gg) but it's not displaying in discord and this oEmbed discovery tester that I've seen a few people recommend http://ift.tt/2wcRN2M says that the url doesn't support recovery.
Here's the link to a page and the html.
<html>
<head>
<link rel="alternate" type="application/json+oembed" href="http://ift.tt/2wcOYyN">
<link rel="alternate" type="text/xml+oembed" href="http://ift.tt/2giVdf0">
<style>
body {
background-color: #232323;
margin: 5px;
}
img {
background-color: #272727;
vertical-align: middle;
text-align: center;
position: absolute;
display: block;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
@keyframes loading-spinner {
0%,
10% {
left: 0;
width: 0;
}
50% {
left: 25%;
width: 50%;
}
90%,
100% {
left: 100%;
width: 0;
}
}
#loading-bar-outer {
top: 0;
z-index: 1;
width: 100%;
height: 10px;
position: fixed;
overflow-x: hidden;
}
#loading-bar {
top: 0;
opacity: 1;
height: 4px;
position: absolute;
background-color: #2098f4;
animation-play-state: running;
transition: opacity 1s ease-in-out;
animation: 2s ease-in-out 0s infinite alternate loading-spinner;
}
#loading-bar.done {
opacity: 0;
}
#loading-bar.completely-done {
animation-play-state: paused;
display: none;
}
</style>
</head>
<body>
<div id="loading-bar-outer">
<div id="loading-bar" class="done completely-done"></div>
</div>
<img id="image" src="http://ift.tt/2wcskGG">
<script>
window.onload = function() {
window.scrollTo(0, 0);
var lb = document.getElementById('loading-bar');
lb.classList.add('done');
setTimeout(function() {
lb.classList.add('completely-done');
}, 1500);
}
</script>
</body>
</html>
According to the oEmbed website, the <link> tags in the head are properly formatted to support discovery
Json response from http://ift.tt/2wcOYyN
{
"version": "1.0",
"type": "rich",
"width": 512,
"height": 512,
"html": "<style>body{font-family:Roboto,Calibri,Arial,sans-serif;max-width: 1024px;}</style><img src='.raw' style='width: 100%; height: auto;'></img><div style='background-color: #212121; padding: 3px; border: 2px 2px 7px 7px;font-weight:600;display:none;'><span style='color: #2098f4'>tacticalpha</span><span style='color: #CCCCCC'>.</span><span style='color: #EEEEEE'>xyz</span></div>"
}
Aucun commentaire:
Enregistrer un commentaire