YouTube Video wird in iFrame nicht angezeigt

Mein YouTube Video, per iFrame, auf der eigenen Website einbinden ist kein Problem. Durch einen kleinen Fehler, kann es sich aber doch schwierig gestalten.

YouTube stellt für die Einbindung von Videos auf Websites einen Einbettungscode zur Verfügung – einfach kopieren, einfügen – und schon hat man das Video auf der eigenen Website. Manchmal möchte man es aber selber machen, oder aber man verwendet ein Widget oder Modul, das den Iframe fix fertig einbaut, und man muss nur noch den Link zum Video angeben – und genau hier kann sich der Fehler verstecken.

Hier die Beispielseite ansehen.

Wie man auf der Beispielseite gut sehen kann, wird das Video in Beispiel 2 einwandfrei angezeigt, währen Beispiel 1 leer bleibt oder eine Fehlermeldung anzeigt.

Fehlermeldungen:

  • Internet Explorer: “Dieser Inhalt kann nicht in einem Frame angezeigt werden. Um die Informationen zu schützen, die Sie auf dieser Website eingeben, hat der Herausgeber dieser Inhalte das Anzeigen der Inhalte in einem Frame untersagt.”
  • Firefox: Beispiel 1 bleibt leer, über die Konsole kann folgende Fehlermeldung eingesehen werden: “Load denied by X-Frame-Options: … does not permit cross-origin framing”
  • Chrome: Beispiel 1 bleibt leer, über die Konsole kann folgende Fehlermeldung eingesehen werden: “Refused to display … in a frame because it set ‘X-Frame-Options’ to ‘SAMEORIGIN’.” bzw. “Blocked a frame with origin … from accessing a frame with origin …. Protocols, domains, and ports must match.”
  • Opera: “Fehler … Die Website erlaubt es nicht, dass deren Inhalt in einem Frame angezeigt wird. Sie muss in einem separaten Fenster angezeigt werden.”
  • Safari: Beispiel 1 bleibt leer

Dabei verwende ich für beide Beispiele folgenden Code:

<iframe width="640" height="360" src="" frameborder="0">
<p>Ihr Browser kann leider keine eingebetteten Frames anzeigen</p>
</iframe>

Der Unterschied liegt lediglich in der Source des Iframes. Während ich für Beispiel 1 einfach die URL des Videos verwendet habe, verwende ich in Beispiel 2 die URL, die YouTube für die Einbettung per iFrame verwendet. Hier die Unterschiede:

http://www.youtube.com/watch?v=iFh1iJzCfZI

http://www.youtube.com/embed/iFh1iJzCfZI

Wenn euer Video also einfach nicht angezeigt werden will – überprüft mal die URL in eurem iFrame.

Veröffentlicht unter Web, HTML, CSS

Hinterlasse eine Antwort

Archiv