Navigation überspringen

Inhalte einbetten

einbinden per iFrame- und Video-Element

Sie möchten Videos, Bilder oder gar komplette Webseiten auf Ihrer Seite einbinden?

So gehts:

iFrame in die Webseite einbinden

In den iFrame können Sie Inhalte anderer Anbieter in Ihre Webseite einbinden. Dies kann zum Beispiel ein Kartenausschnitt von Google Maps, ein Werbebanner von Amazon oder ein YouTube-Video sein.
  • Der Code sieht so aus: <iframe src="einewebseite.html" width="90%" height="400" name="iFrame" title="Das ist mein Video"></iframe>
  • Jeder Eintrag startet mit <iframe und endet mit </iframe>.
  • Geben Sie bei "src=" den Pfad bzw. die URL zu dem Inhalt an, den Sie im Rahmen anzeigen möchten. Es ist wichtig, dass diese Adresse in Anführungszeichen eingetragen wird.
  • Die Attribute "name" und "title" sollten Sie immer ausfüllen. Zu einem wird der Text bei Laden des Frames gezeigt und zum anderen dienen die Einträge der Barrierefreiheit von Online-Inhalten.
  • Damit keine unpassende Standardgröße für den Rahmen in Ihrer Webseite benutzt wird, geben Sie Höhe (height) und Breite (width) an. Diese Werte lassen sich individuell anpassen.
  • Geben Sie die Attribute für Höhe und Breite im Verhältnis zur Webseite in Prozent oder in Pixeln an.
  • Möchten Sie ein eingebundenes Video auf dem ganzen Bildschirm abspielen, fügen Sie dem Code noch das Attribut "allowfullscreen" hinzu: <iframe src="einewebseite.html" width="90%" height="400" name="iFrame" title="Das ist mein Video" allowfullscreen></iframe>
  • Öffnen Sie Ihre Webseite in einem HTML-Editor.
  • Den so zusammengesetzten Code platzieren Sie an gewünschter Stelle auf Ihrer HTML-Seite und speichern die Änderungen ab.

Tipp: YouTube-Video per iFrame einbinden

  • Unter den YouTube-Videos können Sie über "Teilen" > "Einbetten" auch einfach den fertigen iFrame abrufen.
  • Wenn Sie auf "Mehr anzeigen" klicken, können Sie die Player-Elemente im iFrame auch noch modifizieren.

Einbinden mit Video-Tag

Das Element video hat den Vorteil speziell (wie der Name sagt) auf einzubindende Videos zugeschnitten zu sein und bietet daher auch mehr Einstellmöglichkeiten.

Hier ein Beispiel wie Sie es auf der Seite bavaria.lern-und-info.de finden können:

Der Code lautet

<video src="http://mediathek.frickonline.de/Geheimnisvolles_Schloss_Neuschwanstein.mp4" width="640" height="480" 
   poster="http://mediathek.frickonline.de/neuschwanstein_640.jpg" autobuffer controls>
</video>

Erklärung zum obigen Code: src = der Pfad zum Video (im vorliegenden Fall liegt das Video auf dem Server von Strato, auf dem meine Webseiten gehostet werden) ebenso wie das Standbild "poster".

Eine weitere Weisung neben "autobuffer" und "controls" wäre "autoplay", dann würde das Video sofort bei Aufruf der Seite starten. Das mag bei Werbung passend sein, bei Info-Seiten finde ich persönlich es sinnvoller, dass der Leser selbst entscheidet ob und wann er das Video schauen möchte. In diesem Fall empfehle ich ein passendes Standbild ("poster") zu hinterlegen. Ebenso empfehle ich den Befehl "controls", dieser zeigt die bekannte Abspielleiste unterhalb des Videos zum Starten, Anhalten, vergrößern, etc.

bei witdh und height handelt es sich um die Größenvorgabe des Abspielfensters in Pixel.

Als Video-Format empfehle ich das mp4-Format, das zum aktuellen Zeitpunkt von allen gängigen Browsern erkannt und abgespielt werden kann.