Using oEmbed for content embedding

oEmbed is a standard for automated embedding of (interactive) content between systems/websites.

Typical target systems that support oEmbed are for example:

Wordpress
Typo3 (via extension)
Drupal (via extension)

How does it work?

The respective source page (e.g. a single view/media detail page of edu-sharing) provides information in the header, via which an oEmbed compatible client receives information for embedding.

CODE

<link rel="alternate" type="application/json+oembed" href="http://localhost/edu-sharing/eduservlet/oembed?format=json&url=http%3A%2F%2Flocalhost%2Fedu-sharing%2Fcomponents%2Frender%2F0424bf6d-06b4-41ee-a51f-cb397dfd8f5a%3FrepositoryFilter%3Denterprise-7-0%2Centerprise-8-0%26mdsExtended%3Dfalse%26sidenav%3Dfalse%26materialsSortBy%3Dscore%26materialsSortAscending%3Dfalse%26fromLogin%3Dtrue%26fromLogin%3Dtrue">
<link rel="alternate" type="text/xml+oembed" href="https://localhost/edu-sharing/eduservlet/oembed?format=xml&url=https%3A%2F%2Flocalhost%2Fedu-sharing%2Fcomponents%2Frender%2F0424bf6d-06b4-41ee-a51f-cb397dfd8f5a%3FrepositoryFilter%3Denterprise-7-0%2Centerprise-8-0%26mdsExtended%3Dfalse%26sidenav%3Dfalse%26materialsSortBy%3Dscore%26materialsSortAscending%3Dfalse%26fromLogin%3Dtrue%26fromLogin%3Dtrue">

CODE

{
   "type":"photo",
   "version":"1.0",
   "title":"48587785276_ed55ee8d1a_b.jpg",
   "author_name":"Administrator ",
   "provider_url":"https://localhost/edu-sharing",
   "thumbnail_url":"https://localhost/edu-sharing/preview?nodeId\u003d0424bf6d-06b4-41ee-a51f-cb397dfd8f5a\u0026storeProtocol\u003dworkspace\u0026storeId\u003dSpacesStore\u0026dontcache\u003d1679574611667\u0026crop\u003dtrue\u0026maxWidth\u003d500\u0026maxHeight\u003d333",
   "thumbnail_width":500,
   "thumbnail_height":333,
   "url":"https://localhost/edu-sharing/preview?nodeId\u003d0424bf6d-06b4-41ee-a51f-cb397dfd8f5a\u0026storeProtocol\u003dworkspace\u0026storeId\u003dSpacesStore\u0026dontcache\u003d1679574611387",
   "html":"\u003ciframe width\u003d\"700\" height\u003d\"467\" src\u003d\"https://localhost/edu-sharing/eduservlet/render?node_id\u003d0424bf6d-06b4-41ee-a51f-cb397dfd8f5a\" frameborder\u003d\"0\" allow\u003d\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\"\u003e\u003c/iframe\u003e",
   "width":700,
   "height":467
}

Using this data, the target system can embed the media automatically via the HTML code as an IFrame.

Usage

The use depends on the respective client. We use Wordpress as an example:

In the target system (Wordpress), navigate to the page where you want to embed the content.
Open the content you want to embed in the edu-sharing system in single view
1. Attention! The selected content must be shared publicly.
Copy the URL of the browser from the edu-sharing page.
Paste the URL into the target system.
After a short time, the system will recognise the information and the content will be embedded automatically.

Notes & restrictions

oEmbed only works for edu-sharing instances with guest access and for publicy shared media.
Accesses via oEmbed are tracked like "normal" accesses, there is no differentiation in tracking.
edu-sharing does not receive any information about the pages or systems in which the content was embedded via oEmbed.