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:
Code-Sprache: HTML, XML (xml)/** * 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 | */
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)Nachtrag: das Snippet stammte ursprünglich von Sergej Müller. Mittlerweile ist es nicht mehr auf Github veröffentlicht.
