It’s super easy to embed videos, images, tweets, audio, and other content into your WordPress site.
Usage
To embed a video or another object into a post or page, place its URL into the content area. Make sure the URL is on its own line and not hyperlinked (clickable when viewing the post).
For example:
Check out this cool video: That was a cool video.
WordPress will automatically turn the URL into a YouTube embed and provide a live preview in the visual editor.
Another option is to wrap the URL in the “embed” Shortcode.
// NOTE: Remove space between '[' and 'embed' when you try. [ embed width="123" height="456"]http://www.youtube.com/watch?v=dQw4w9WgXcQ[/embed]
If WordPress fails to embed the URL, the post will contain a hyperlink to the URL.
oEmbed
The easy embedding feature is mostly powered by oEmbed, a protocol for site A (such as your blog) to ask site B (such as YouTube) for the HTML needed to embed content from site B.
oEmbed was designed to avoid the need to copy and paste HTML from the site hosting the media you wish to embed. It supports videos, images, text, and more.
Does This Work With Any URL?
No, not by default. WordPress will only embed URLs matching an internal whitelist. This is for security purposes.
Okay, So What Sites Can I Embed From?
You can use all of these:
| Service | Embed Type | Since |
|---|---|---|
| Amazon Kindle instant previews | Videos | WordPress 4.9 |
| Animoto | Videos | WordPress 4.0 |
| Blip | Videos | WordPress 2.9 |
| Cloudup | Videos, Galleries, Images | WordPress 4.4 |
| CollegeHumor | Videos | WordPress 4.0 |
| Crowdsignal | Polls & Surveys | WordPress 3.0 |
| DailyMotion | Videos | WordPress 2.9 |
| post, activity, photo, video, media, question, note | WordPress 4.7 | |
| Flickr | Videos & Images | WordPress 2.9 |
| FunnyOrDie.com | Videos | WordPress 3.0 |
| Giphy | Animated GIFs | WordPress 4.7 |
| Hulu | Videos | WordPress 2.9 |
| Imgur | Images | WordPress 3.9 |
| Images | WordPress 3.5 | |
| Issuu | Documents | WordPress 4.0 |
| Kickstarter | Projects | WordPress 4.2 |
| Meetup.com | Various | WordPress 3.9 |
| Mixcloud | Music | WordPress 4.0 |
| Photobucket | Images | WordPress 2.9 |
| Posts & Comments | WordPress 4.4 | |
| ReverbNation | Music | WordPress 4.4 |
| Scribd | Documents | WordPress 2.9 |
| SlideShare | Presentation slideshows | WordPress 3.5 |
| SmugMug | Various | WordPress 3.0 |
| SoundCloud | Music | WordPress 3.5 |
| Speaker Deck | Presentation slideshows | WordPress 4.4 |
| Spotify | Music | WordPress 3.6 |
| TED | Videos | WordPress 4.0 |
| Tumblr | Various | WordPress 4.2 |
| Tweet, profile, list, collection, likes, Moment | WordPress 3.4 | |
| VideoPress | Videos | WordPress 4.4 |
| Vimeo | Videos | WordPress 2.9 |
| Vine | Videos | WordPress 4.1 |
| WordPress plugin directory | Plugins | WordPress 4.4 |
| WordPress.tv | Videos | WordPress 2.9 |
| YouTube | Videos | WordPress 2.9 |
Notes
- Twitter – older versions of WordPress have issues with https embeds, just remove the s from the https to fix.
- YouTube – only public and “unlisted” videos and playlists – “private” videos will not embed.
- Tumblr – only posts (name.tumblr.com/post/etc) are recognized, not standalone images (name.tumblr.com/image)
How Can I Add or Change Support For Websites?
Adding support for an additional website depends on whether the site supports oEmbed.
Adding Support For An oEmbed-Enabled Site
If a site supports oEmbed, you’ll want to call wp_oembed_add_provider() to add the site and URL format to the internal whitelist.
Adding Support For A Non-oEmbed Site A
You’ll need to register a handler using wp_embed_register_handler() and provide a callback function that generates the HTML.
Removing Support for An oEmbed-Enabled Site
If you wish to remove an oEmbed-enabled provider, you’ll want to call wp_oembed_remove_provider.
What About oEmbed Discovery?
As of version 4.4, WordPress supports oEmbed discovery, but has severe limitations on what type of content can be embedded via non-whitelisted sites.
Specifically, the HTML and Video content is filtered to only allow links, blockquotes, and iframes, and these are additionally filtered to prevent insertion of malicious content. The HTML is then modified to be sandboxed and to have additional security restrictions placed on them as well.
However, if you feel you are knowledgeable enough to not require this level of safety, you can give unfiltered_html users (Administrators and Editors) the ability to embed from websites that have oEmbed discovery tags in their <head>.
The oEmbed discovery content for “link” and “photo” types is not quite so heavily filtered in this manner, however it is properly escaped for security and to prevent any malicious content from being displayed on the site.
External Resources
- oEmbed.com – Official oEmbed website with technical details of the spec
- Get Started With OEmbed – by Webmonkey.com
- WordPress oEmbed Providers Registration Generator – by GenerateWP.com
- Easy Embeds For WordPress 2.9 – by Alex Mills (Viper007Bond)
- How to Set oEmbed Max Width in WordPress 3.5 with $content_width? – by wpbeginner.com
Changelog
- 2.9 :
- Introduction of the builtin Embeds support.
- 3.0 :
- Added: SmugMug, FunnyOrDie
- 3.4 :
- Added: Twitter
- 3.5 :
- Embed options were removed from the Settings Media Screen.
- Added: Instagram, SoundCloud, SlideShare
- 3.6 :
- Added: Rdio, Spotify
- 3.9 :
- Removed: Qik (the service shutting down in April 2014)
- 4.0 :
- Major reworking of the preview code showing embeds within the editor wp.mce.views.
- Added: CollegeHumor, Issuu, Mixcloud, YouTube playlists, TED talks
- Removed: Viddler (removed due to the service shutting down their oEmbed endpoint)
- 4.1 :
- Added: Vine
- 4.2 :
- Added: Kickstarter, Tumblr
- Removed: Revision3
- 4.4 :
- Added: ReverbNation, Cloudup, Reddit, SpeakerDeck, VideoPress
- Removed: Blip
- 4.4.1 :
- Removed: Rdio (Service shut down)
- 4.5 :
- Added: Twitter Moment, collection
- 4.7 :
- Added: Twitter profile, list, likes
- Added: Facebook post, activity, photo, video, media, question, note
- 5.1 :
- Renamed: PollDaddy service has been renamed to Crowdsignal