Easy embedding of third party content
oEmbed is a format for enabling an embedded representation of a URL on third party websites.
The simple API allows a website to display embedded content (such as photos or videos)
when a user posts a link to that resource, without having to parse the resource directly.
All you need to do to embed material from one of the supported providers is add a link to it.
The plugin will contact the provider and use the appropriate code to add it to the page, e.g. an iframe for videos and the like.
Supported providers
- 23HQ
- Abraia
- ActBlue
- Adilo
- Adways
- AltiumLLC
- Altru
- Amtraker
- Animatron
- Animoto
- AnnieMusic
- Apester
- ArcGISStoryMaps
- Archivos
- AudioClip
- Audioboom
- Audiomack
- Audiomeans
- Avocode
- Backtracks
- Beautiful.AI
- Blackfire.io
- Blogcast
- Bookingmood
- BoxOfficeBuz
- BrioVR
- Bumper
- Buttondown
- ByzartProject
- CHROCO
- Cacoo
- CatBoat
- Catapult
- Ceros
- Chainflix
- ChartBlocks
- CircuitLab
- Clipland
- Clyp
- CoCoCorp
- CodeHS
- CodePen
- CodeSandbox
- Codepoints
- CollegeHumor
- Commaful
- Coub
- CrowdRanking
- Crumb.sh
- CueupDJBooking
- Curated
- CustomerDB
- DALEXNI
- DTube
- Dailymotion
- Datawrapper
- DeseretNews
- Deviantart.com
- Didacte
- Digiteka
- DocDroid
- Dotsub
- EgliseInfo
- Embedery
- Embedly
- EnystreMusic
- Ethfiddle
- EventLive
- Ex.Co
- Eyrie
- FITE
- FOXSPORTSAustralia
- Facebook
- Fader
- FaithlifeTV
- Firework
- Flat
- Flickr
- Flourish
- FrameBuzz
- Framer
- GIPHY
- GMetri
- GTChannel
- GeographBritainandIreland
- GeographChannelIslands
- GeographGermany
- GettyImages
- Gfycat
- Gifnote
- GloriaTV
- Gong
- Grain
- Gyazo
- HASH
- HippoVideo
- Homey
- HuffDuffer
- Hulu
- IFTTT
- Idomoo
- Incredible
- Indaco
- Infogram
- Infoveave
- Injurymap
- Inoreader
- Instagram
- InsticatorInc
- Issuu
- Jovian
- KakaoTv
- Kickstarter
- Kidoju
- Kirim.Email
- Kit
- Kitchenbowl
- Knacki
- KnowledgePad
- Kooapp
- LeMans.Pod
- LearningApps.org
- Lille.Pod
- Livestream
- LottieFiles
- Ludus
- Lumiere
- MathEmbed
- Matterport
- MediaLab
- MedienarchivderKünste-ZürcherHochschulederKünste
- MermaidInk
- MicrosoftStream
- Minerva
- MixCloud
- MobyPicture
- MusicBoxManiacs
- NFTNDX.IO
- Namchey
- Nasjonalbiblioteket
- NaturalAtlas
- NoPaste
- OZ
- Observable
- Odds.com.au
- Odesli(formerlySonglink)
- Odysee
- OfficialFM
- Omniscope
- OmnyStudio
- OraTV
- Orbitvu
- Outplayed.tv
- Overflow
- Padlet
- PandaVideo
- Pastery
- PingVP
- Pinpoll
- Pinterest
- PitchHub
- Pixdor
- Podbean
- PollDaddy
- Portfolium
- Present
- PreziVideo
- Quiz.biz
- Quizz.biz
- RadioPublic
- Raindrop
- Reddit
- ReleaseWire
- Replit
- ReverbNation
- Roomshare
- RoosterTeeth
- Rumble
- Runkit
- Saooti
- SapoVideos
- Screen9
- Screencast.com
- Screenr
- ScribbleMaps
- Scribd
- SendtoNews
- ShortNote
- Shoudio
- ShowbyAnimaker
- ShowtheWay,actionablelocationinfo
- Simplecast
- Sizzle
- Sketchfab
- SlideShare
- SmashNotes
- Smrthi
- SmugMug
- SocialExplorer
- SoundCloud
- SpeakerDeck
- Spotify
- Spreaker
- SproutVideo
- StanfordDigitalRepository
- Streamable
- Streamio
- Subscribi
- Sudomemo
- Sutori
- Sway
- SwayOffice
- Synthesia
- TED
- TheNewYorkTimes
- TheySaidSo
- TickCounter
- TikTok
- Toornament
- Topy
- Totango
- TrinityAudio
- Tumblr
- Tuxx
- Twitter
- TypeCast
- Typlog
- UAPod
- UnivParis1.Pod
- UniversityofCambridgeMap
- Upec.Pod
- Ustream
- VEVO
- VLIVE
- VeeRVR
- Verse
- Videfit
- Vidyard
- Vimeo
- Viously
- Vizydrop
- Vlipsy
- Vouch
- VoxSnap
- Waltrack
- Wave.video
- Wiredrive
- Wistia,Inc.
- Wokwi
- WolframCloud
- WordPress.com
- YouTube
- Zeplin
- ZingSoft
- ZnipeTV
- Zoomable
- afreecaTV
- amChartsLiveEditor
- chirbit.com
- dadan
- eduMedia
- everviz
- hearthis.at
- hihaho
- iFixit
- iHeartRadio
- inphood
- kmdr
- me.me
- myBeweeg
- nanoo.tv
- nfb.ca
- rcvis
- tvcf
- uStudio,Inc.
- wecandeo
- wizer.me
A lot of providers are available via
http://embed.ly. However, you'll have to register to get an api-key.
Some of the listed providers have already been added to this plugin, yet not all.
Syntax
EMBED
%EMBED{"url" [width="..." height="..."]}%
(or
%OEMBED{...}%
)
-
url
: an external link to the resource to be embedded
-
width
, height
: optional maximum values for the image/video/... being embedded (note: not all providers properly implement these parameters)
-
format
: a format string to implement a custom renderer
-
template
: the name of a template defined in oembed.tmpl
; known templates shipped with OEmbedPlugin are "article" (todo add more)
-
quality
(youtube only): specify the thumbnail quality; possible values are hq
, mq
, sd
, default
and auto
; the latter will find out automatically which best thumbnail is available
-
<custom_key>
: any custom key="value" pair may be defined and made use of in the format (or template) using $custom_key
to expand it; these have higher precendence than the default values submitted by the oembed provider; for example use a custom thumbnail_width="100"
parameter to override the default width.
The keys in the json submitted from the oembed provider can be used in a format string (or a template definition). Some well-known keys are:
-
$author_name
-
$author_url
-
$descriptio
-
$html
-
$provider_name
-
$provider_url
-
$thumbnail_height
-
$thumbnail_url
-
$thumbnail_width
-
$title
-
$type
-
$url
-
$web_page
In addition all standard format tokens can be used (
$percnt
,
$dollar
,
$nop
, etc).
See the
oembed.tmpl
file on how to use them.
OEMBED_PROVIDER
%OEMBED_PROVIDER{["<id>"]}%
-
id
: provider name to display the configuration for
-
format
: format string, defaults to 1 [[$provider][$name]
-
header
: header string added if there was a provider in the list
-
footer
: footer string added if ...
-
separator
: separator string inserted between each provider found
-
exampleformat
: format strings for available examples
-
exampleheader
-
examplefooter
-
exampleseparator
-
include
: regular expression that the provider must match to be included in the output
-
exclude
: regular expression that the provider must not match to be included in the output
The format string may use the following variables
-
$name
: name of provider
-
$examples
: example string constructed from example[format,header,footer,separator]
-
$provider
: url address of the provider
-
$api
: api address for the oembed endpoint
-
$url
: list of patterns that an url must match to be processed by this provider
To display all examples stored in the provider records use:
<form action="%SCRIPTURLPATH{"view"}%/%WEB%/%TOPIC%">
*Url*:
<input type="text" size="80" name="url" value="%URLPARAM{"url"}%" />
<input type="submit" class="foswikiButton" value="Embed" />
</form>
%IF{"$'URLPARAM{url}'!=''"
then="$percntEMBED{\"%URLPARAM{"url"}%\"}$percnt"
}%
%OEMBED_PROVIDER{
format=" 1 $name: $examples"
exampleformat="[[%SCRIPTURLPATH{"view"}%/%WEB%/%TOPIC%?url=$url][example]]"
}%
Examples
Youbtube
%EMBED{"https://www.youtube.com/watch?v=O8e8Ttfz-pY" width="600"}%
%EMBED{"https://www.youtube.com/watch?v=O8e8Ttfz-pY" width="600"}%
Soundcloud
%EMBED{"https://soundcloud.com/safia-music/listen-to-soul-listen-to-blues" width="600"}%
%EMBED{"https://soundcloud.com/safia-music/listen-to-soul-listen-to-blues" width="600"}%
Flickr
%EMBED{"https://www.flickr.com/photos/onement/1239189689/" height="400"}%
%EMBED{"https://www.flickr.com/photos/onement/1239189689/" height="400"}%
Installation Instructions
You do not need to install anything in the browser to use this extension. The following instructions are for the administrator who installs the extension on the server.
Open configure, and open the "Extensions" section. "Extensions Operation and Maintenance" Tab -> "Install, Update or Remove extensions" Tab. Click the "Search for Extensions" button.
Enter part of the extension name or description and press search. Select the desired extension(s) and click install. If an extension is already installed, it will
not show up in the
search results.
You can also install from the shell by running the extension installer as the web server user: (Be sure to run as the webserver user, not as root!)
cd /path/to/foswiki
perl tools/extension_installer <NameOfExtension> install
If you have any problems, or if the extension isn't available in
configure
, then you can still install manually from the command-line. See
https://foswiki.org/Support/ManuallyInstallingExtensions for more help.
Dependencies
Name | Version | Description |
---|
Moo | >=0 | Required |
Regexp::Assemble | >=0 | Required |
Foswiki::Contrib::CacheContrib | >=0 | Required |
Change History
30 Apr 2024 |
fixed use of CacheContrib |
30 May 2023 |
fixed parsing video id from youtube iframes |
05 May 2022 |
added a few more oembed providers |
03 Mar 2021 |
adedd microsoft stream provider |
22 Jan 2020 |
imported provider from https://github.com/iamcal/oembed; implemented %OEMBED_PROVIDER |
13 Mar 2019 |
document quality parameter when embeding youtube videos; added quality="auto" to fetch the best thumbnail available; added support for proxy |
25 Sep 2017 |
added clearCache REST interface for local cache maintenance |
17 Nov 2016 |
more providers; converted Web::oEmbed from Any::Moose to Moo |
07 Oct 2015 |
multiple providers went in & out |
16 Mar 2015 |
added Infogram |
23 Feb 2015 |
added a few more provider |
16 Dec 2014 |
have an image preview for vimeo and youtube and only embed the real video when clicking on it; added Vine |
25 Sep 2014 |
added caching |
24 Sep 2014 |
added a custom renderer for youtube videos |
29 Aug 2014 |
removed my opera, qirk and urtak; use https whereever possible |
01 Nov 2013 |
added more providers |
30 Aug 2013 |
added more providers |
24 Jun 2013 |
added format, template and custom params; added a few more providers |