Einbetten von Medienobjekten in WordPress mit oEmbed

Prä-HTML5

So haben wir früher mal YouTube Videso eingebunden, noch zu HTML 4.0 und Flashplayerzeiten:

<object width="640" height="390">
    <param name="movie" value="https://www.youtube.com/v/e1S9HUNoI4k?version=3"></param> 
    <param name="allowScriptAccess" value="always"></param>
    <embed src="https://www.youtube.com/v/e1S9HUNoI4k?version=3" type="application/x-shockwave-flash" allowscriptaccess="always" width="640" height="390"></embed>
</object>
Code-Sprache: HTML, XML (xml)

Heute

Das wirkt doch schon wesentlich übersichtlicher:

<iframe src="//www.youtube.com/embed/e1S9HUNoI4k?feature=player_detailpage" height="360" width="640" allowfullscreen="" frameborder="0"></iframe>
Code-Sprache: HTML, XML (xml)

Mit oEmbed in einem WordPress Post

Und so machen wir das in WordPress:
https://www.youtube.com/watch?v=L94D_30Xojc

Das war’s auch schon. Viele Blogger, besonders wenn sie schon lange mit WordPress arbeiten und die iframe-Lösung gewohnt sind, scheinen diese wundersame Vereinfachung gar nicht mitbekommen zu haben.

Der Link zum teilenswerten Inhalt (zum Beispiel einem YouTube-Video) wird aus der Adresszeile des Browsers kopiert, in einer eigenen Zeile in einen WordPress-Beitrag eingefügt, und um den Rest kümmert sich WordPress. Der »Embed-Code« mit dem man ein YouTube-Video in einen WordPress-Beitrag einbettet, besteht also einfach nur aus einem link wie diesem:
https://www.youtube.com/watch?v=7rOMGIbY-9s

Unterstützte Provider

Die Liste unterstützter (und auch nicht mehr unterstützter) Provider ist in WordPress unter wp-includes in der Datei class-oembed.php zu finden. Aktuell (WordPress 4.5) sieht die Liste unterstützter Provider so aus:

/**
 * Filter the list of whitelisted oEmbed providers.
 *
 * Since WordPress 4.4, oEmbed discovery is enabled for all users and allows embedding of sanitized
 * iframes. The providers in this list are whitelisted, meaning they are trusted and allowed to
 * embed any content, such as iframes, videos, JavaScript, and arbitrary HTML.
 *
 * Supported providers:
 *
 * |   Provider   |        Flavor         | Supports HTTPS |   Since   |
 * | ------------ | --------------------- | :------------: | --------- |
 * | Dailymotion  | dailymotion.com       |      Yes       | 2.9.0     |
 * | Flickr       | flickr.com            |      Yes       | 2.9.0     |
 * | Hulu         | hulu.com              |      Yes       | 2.9.0     |
 * | Photobucket  | photobucket.com       |      No        | 2.9.0     |
 * | Scribd       | scribd.com            |      Yes       | 2.9.0     |
 * | Vimeo        | vimeo.com             |      Yes       | 2.9.0     |
 * | WordPress.tv | wordpress.tv          |      Yes       | 2.9.0     |
 * | YouTube      | youtube.com/watch     |      Yes       | 2.9.0     |
 * | Funny or Die | funnyordie.com        |      Yes       | 3.0.0     |
 * | Polldaddy    | polldaddy.com         |      Yes       | 3.0.0     |
 * | SmugMug      | smugmug.com           |      Yes       | 3.0.0     |
 * | YouTube      | youtu.be              |      Yes       | 3.0.0     |
 * | Twitter      | twitter.com           |      Yes       | 3.4.0     |
 * | Instagram    | instagram.com         |      Yes       | 3.5.0     |
 * | Instagram    | instagr.am            |      Yes       | 3.5.0     |
 * | Slideshare   | slideshare.net        |      Yes       | 3.5.0     |
 * | SoundCloud   | soundcloud.com        |      Yes       | 3.5.0     |
 * | Dailymotion  | dai.ly                |      Yes       | 3.6.0     |
 * | Flickr       | flic.kr               |      Yes       | 3.6.0     |
 * | Spotify      | spotify.com           |      Yes       | 3.6.0     |
 * | Imgur        | imgur.com             |      Yes       | 3.9.0     |
 * | Meetup.com   | meetup.com            |      Yes       | 3.9.0     |
 * | Meetup.com   | meetu.ps              |      Yes       | 3.9.0     |
 * | Animoto      | animoto.com           |      Yes       | 4.0.0     |
 * | Animoto      | video214.com          |      Yes       | 4.0.0     |
 * | CollegeHumor | collegehumor.com      |      Yes       | 4.0.0     |
 * | Issuu        | issuu.com             |      Yes       | 4.0.0     |
 * | Mixcloud     | mixcloud.com          |      Yes       | 4.0.0     |
 * | Polldaddy    | poll.fm               |      Yes       | 4.0.0     |
 * | TED          | ted.com               |      Yes       | 4.0.0     |
 * | YouTube      | youtube.com/playlist  |      Yes       | 4.0.0     |
 * | Vine         | vine.co               |      Yes       | 4.1.0     |
 * | Tumblr       | tumblr.com            |      Yes       | 4.2.0     |
 * | Kickstarter  | kickstarter.com       |      Yes       | 4.2.0     |
 * | Kickstarter  | kck.st                |      Yes       | 4.2.0     |
 * | Cloudup      | cloudup.com           |      Yes       | 4.4.0     |
 * | ReverbNation | reverbnation.com      |      Yes       | 4.4.0     |
 * | VideoPress   | videopress.com        |      Yes       | 4.4.0     |
 * | Reddit       | reddit.com            |      Yes       | 4.4.0     |
 * | Speaker Deck | speakerdeck.com       |      Yes       | 4.4.0     |
 * | Twitter      | twitter.com/timelines |      Yes       | 4.5.0     |
 * | Twitter      | twitter.com/moments   |      Yes       | 4.5.0     |
 */
Code-Sprache: HTML, XML (xml)

Globale Kontrolle über den Output

Datenaustausch zwischen Websites und Providern (Socialmedia-Plattformen) wird immer wichtiger, und damit auch gemeinsame Standards. Die Vorgehensweise eröffnet außerdem den Weg zur globalen Kontrolle über die Darstellung eingebetteter Inhalte, bis hin zum Ausblenden einzelner oder aller Provider. Über den Filter embed_oembed_html kann der HTML-Output modifizert werden, und Inhalte (je nach Provider oder global) mit einem (responsive) Wrapper umgeben werden, so dass sich die Darstellung an jede Displaygröße anpassen kann, selbst wenn die Maße in Pixeln angegeben sind, wie bei Videos üblicherweise.

YouTube Videos im erweiterten Datenschutzmodus einbetten

Nachfolgendes Beispiel für die globale Kontrolle über den Output ändert die Standard-URL von youtube zur (angeblich) datenschutzverträglichen youtube-nocookie.com-URL.

add_filter( 'embed_oembed_html', 'mytheme_youtube_nocookie', 10, 4 );

function mytheme_youtube_nocookie( $html, $url, $attr, $post_ID ) {
	if ( preg_match('#https?://(www\.)?youtu#i', $url) ) {
		return preg_replace(
			'#src=(["\'])(https?:)?//(www\.)?youtube\.com#i',
			'src=$1$2//$3youtube-nocookie.com',
			$html
		);
	}
	return $html;
}
Code-Sprache: PHP (php)