Add OEmbed support to my website: www.dri.ie

[mashalahmad]

Hi Im trying to make my website https://www.dri.ie/ as provider here is my code but Im getting error no embedable content at ....
can anybody help what im doing wrong?
my_provider = OEmbed::Provider.new("https://www.dri.ie/oembed.json")
my_provider << "https://.dri.ie/catalog/"
my_provider << "http://.dri.ie/catalog/"
resource = my_provider.get("https://repository.dri.ie/catalog/5999pn33w")
puts resource.provider.name

[metavida]

Hi @mashalahmad

I can indeed reproduce the error you're seeing. The my_provider.get is resulting the following error for me:

OEmbed::NotFound (No embeddable content at '/oembed.json?url=https%3A%2F%2Frepository.dri.ie%2Fcatalog%2F5999pn33w&format=json')

Best I can tell, the problem is not specifically with the gem. I tried using curl to retrieve oEmbed data from your website and got a 404 response from your servers. Can you help me understand why your server is returning a 404 for this GET request? Is the URL wrong? Is the server expecting a specific header instead of the format= query param?

Here's the curl I'm using to reproduce:

$ curl --verbose --silent --show-error --output /dev/null \
    "https://www.dri.ie/oembed.json?url=https%3A%2F%2Frepository.dri.ie%2Fcatalog%2F5999pn33w&format=json"

I get the following output:

*   Trying 134.226.115.201...
* TCP_NODELAY set
* Connected to www.dri.ie (134.226.115.201) port 443 (#0)
...
*  SSL certificate verify ok.
> GET /oembed.json?url=https%3A%2F%2Frepository.dri.ie%2Fcatalog%2F5999pn33w&format=json HTTP/1.1
> Host: www.dri.ie
> User-Agent: curl/7.64.1
> Accept: */*
> 
< HTTP/1.1 404 Not Found
< Date: Sun, 23 Aug 2020 16:35:51 GMT
< Server: Apache/2.4.18 (Ubuntu)
< X-Content-Type-Options: nosniff
< X-Drupal-Cache: HIT
< Etag: "1598200168-0"
< Content-Language: en
< X-Frame-Options: SAMEORIGIN
< X-UA-Compatible: IE=edge
< Link: </node/772>; rel="shortlink",</home-page-content>; rel="canonical"
< X-Generator: Drupal 7 (http://drupal.org)
< Cache-Control: public, max-age=86400
< Last-Modified: Sun, 23 Aug 2020 16:29:28 GMT
< Expires: Sun, 19 Nov 1978 05:00:00 GMT
< Vary: Cookie,Accept-Encoding
< Connection: close
< Transfer-Encoding: chunked
< Content-Type: text/html; charset=utf-8
< Set-Cookie: SERVERID=dri-guest045; path=/
< Cache-control: private
< 
{ [13874 bytes data]
* Closing connection 0
* TLSv1.2 (OUT), TLS alert, close notify (256):
} [2 bytes data]

[mashalahmad]

Hi thanks for responding. well Im trying to set the API end point but Im not sure how can I do that. I install the gem and in the controller I used the above function. Will the gem not automatically convert the content on my site as embed able? By adding the above function?

About your query that why you are getting 404 I think its becoz we have implemented the content to display with the post in rails.

[metavida]

Will the gem not automatically convert the content on my site as embed able? By adding the above function?

Sadly no. This gem is a oEmbed consumer library, which is intended to read details about videos from websites that already implement an oEmbed API endpoint.

You'll have to implement an oEmbed API provider endpoint on your site, which gem will not help with. Fortunately, the API endpoint that oEmbed specifies is a pretty simple REST API endpoint. I may even be able to give you enough pointers to get you started. In Rails you'll want a controller that looks something like this:

# Implements the https://oembed.com/ specification
controller OEmbed < ApplicationController
  def index
    resource_url = URI.parse(params['url'])
    # Extract the resource ID from the path
    resource_id = resource_url.path.match(%r|/catalog/([^/]+)|)
    resource_id &&= resource_id[1]
    # I'm pretending you've got a Resource model you can query
    @resource = Resource.find(resource_id)

    # Build up a JSON response with the required attributes
    # See "2.3.4. Response parameters" at https://oembed.com/
    response = {
      type: 'video',
      version: '1.0',
      title: @resource.title, # assuming this is the name of your resource
      provider_name: 'DRI: Digital Repository of Ireland',
      provider_url: 'https://www.dri.ie/',
      # You can optionally also provide thumbnail info
      #thumbnail_url, thumbnail_width, thumbnail_height

      # Required video attributes
      # See "2.3.4.2. The video type" at https://oembed.com/
      width: @resource.width,
      height: @resource.height,
      # Some pseudo-code to demonstrate that your action
      # will need to return the embed code to the video from the given page
      html: <<-HTML
        <video controls="controls" class="dri_video">
          <source src="https://repository.dri.ie/objects/#{@resource.id}/files/#{@resource.file_id}?surrogate=mp4">
          <source src="https://repository.dri.ie/objects/#{@resource.id}/files/#{@resource.file_id}?surrogate=webm">
        </video>
      HTML
    }

    render json: @response
  end
end

Of course the above implementation makes pretty big assumptions about the models you have in your app. It also doesn't set up your route. And of course you may get better maintainability if you use a proper JSON-producing view of some sort.

Does this help at all?

[mashalahmad]

thanks alot it really help alot. will ask more after implementing what u suggest thanks alot

[mashalahmad]

and could you plz tell in case if I had 3D data I want to output iframe as an html would that be possible?

[metavida]

Yes! All of the supported formats are visible in the spec at https://oembed.com/ : video, photo, link, and rich. What you described sounds like the “rich” type to me: “This type is used for rich HTML content that does not fall under one of the other categories.”

…

On Tue, Aug 25, 2020 at 1:27 AM mashalahmad ***@***.***> wrote: and could you plz tell in case if I had 3D data I want to output iframe as an html would that be possible? — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#73 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAAAPDNXJ4BQBUH6WTVC7ODSCNYXXANCNFSM4QF23DLA> .

[mashalahmad]

Ok one more question the url you put in the video tags that will make the video embed able? and I have to set up the route than what does the API is doing? i will website with api end point route to the provider list then it will accept my website among the providers ? The route of embedded content that I saw in examples is different then what u have given as an example. can u plz guide how to set up route in routes?

[mashalahmad]

Hi Could you please check if the response that I implemented seems okay? One thing that I am really confused is the url in iframe for rich content . How could I test if its embedable or not? This code is not deployed yet.

{
type: "Rich",
version: "1.0",
title: [
"Model beenah"
],
provider_name: "DRI: Digital Repository of Ireland",
provider_url: "https://repository.dri.ie/",
width: 500,
height: 500,
html: " <iframe src = " /objects/sn009x76k/files/hd76s004z/download?type=masterfile"> </iframe> "
}

[mashalahmad]

want to share the output of curl command that you share its giving me 200 ok response
`> "http://localhost:3000/api/oembed?url=http%3A%2F%2Flocalhost%3A3000%2Fcatalog%2Fsn009x76k"

• Trying 127.0.0.1...
• Connected to localhost (127.0.0.1) port 3000 (#0)

GET /api/oembed?url=http%3A%2F%2Flocalhost%3A3000%2Fcatalog%2Fsn009x76k HTTP/1.1
Host: localhost:3000
User-Agent: curl/7.47.0
Accept: /

< HTTP/1.1 200 OK
< X-Frame-Options: SAMEORIGIN
< X-XSS-Protection: 1; mode=block
< X-Content-Type-Options: nosniff
< X-Download-Options: noopen
< X-Permitted-Cross-Domain-Policies: none
< Referrer-Policy: strict-origin-when-cross-origin
< Access-Control-Allow-Origin: *
< Content-Type: application/json; charset=utf-8
< ETag: W/"55d03d6096e17a3f3322705c073b7fce"
< Cache-Control: max-age=0, private, must-revalidate
< Set-Cookie: lang=en; path=/; expires=Sun, 18 Nov 2040 13:11:12 GMT
< Set-Cookie: metadata_language=all; path=/; expires=Sun, 18 Nov 2040 13:11:12 GMT
< X-Request-Id: dd50cf5f-0a4f-4cee-af68-b375f02aa245
< X-Runtime: 0.048024
< Connection: close
< Server: thin
<
{ [337 bytes data]

• Closing connection 0
  `

[metavida]

Hi there! Looks like you're making great progress & definitely heading in the right direction!

Hi Could you please check if the response that I implemented seems okay?
Yes, the response looks generally good and I would make the following changes:

{
-  type: "Rich",
+  type: "rich", 
  version: "1.0",
-  title: ["Model beenah"],
+  title: "Model beenah",
  provider_name: "DRI: Digital Repository of Ireland",
  provider_url: "https://repository.dri.ie/",
  width: 500,
  height: 500,
-  html: " <iframe src = " /objects/sn009x76k/files/hd76s004z/download?type=masterfile"> </iframe> "
+  html: " <iframe src = \"https://repository.dri.ie/objects/sn009x76k/files/hd76s004z/download?type=masterfile\" width=\"500\" height=\"500\"> </iframe> "
}

1. The "type" value should be lower case.
2. The "title" should be a String, not an Array.
3. The "html" value must include a full URL (including the hostname) so that when someone pastes that iframe code onto their website (e.g. maybe a Wordpress blog) the browser knows to download the embedded content from your servers. Of course you can use "http://localhost:3000/" for your local development so long as it uses the right, production hostname when you deploy to production.
4. Be sure the quotes in the "html" are escaped correctly (you'll probably get a ruby syntax error if they're not, so I'm not too worried about that)
5. The "html" should likely width & height attributes.

How could I test if its embedable or not?

You can use a tool like https://codepen.io to test this out. On the CodePen home page there's a "Start Coding" button. Then paste in the "html" that you're planning to return in the response. If it shows up as embedded, the way you like, the congratulations! Here are screenshots of what I'm talking about:

And it's worth pointing out that you don't have to return an <iframe> tag in your "html" attribute! For resource like https://repository.dri.ie/catalog/5999pn33w (for example) the "html" value totally could be the same <video> tag you use to display the video on your website today. For resource like https://repository.dri.ie/catalog/ms366r041 the "html" value could be just a simple <img> tag. There's nothing wrong with using an <iframe>, I just wanted to make sure you knew that you didn't have to use an iframe.

[mashalahmad]

Hey thanks a lot for responding. Actually I want to make 3D model covid model as embedable so I guess iframe would be suitable for that. But really thankyou for guiding me :) cheers!!!!

[mashalahmad]

can you please tell why 3D object is not not showing as embedable? here is the link https://repository.dri.ie/catalog/g732sz11t. I want to make 3D object embedable not video or image. but its not working if I use the url that I used for showing 3D. it simply download the file. https://repository.dri.ie/objects/g732sz11t/files/gb19tt955/download?type=masterfile