Überschrift strassencoder.ch
Logo strassencoder.ch
Überschrift Iframes

Ein iframe-Element einbinden in HTML

Ein iframe wird definiert mit den <iframe> und </iframe> Tags: Mit dem iFrame-Element können Sie Inhalte anderer Anbieter in Ihre Webseite einbinden. Dies kann zum Beispiel ein Kartenausschnitt von Google Maps oder ein YouTube-Video sein.

<iframe src="URL oder Pfad"></iframe>

Das src-Attribut weist auf die URL (Web-Addresse) oder den Pfad vom Iframe hin. Verwende die <width> und <height> Attribute zur definition der Grösse des iframe. Die Grösse des iframe wird in Pixel definiert (Vorlage) oder in Prozent.

Videos und Playlists einbetten (Youtube):

1. Rufe auf einem Computer das YouTube-Video auf, das du einbetten möchtest.
2. Klicke unter dem Video auf TEILEN .
3. Klicke auf Einbetten.
4. Kopiere den HTML-Code aus dem angezeigten Feld.
5. Füge den Code in den HTML-Code deines Blogs oder deiner Website ein.

Google Maps als iFrame einbetten(Google Maps):

1. Geben Sie die Adresse, die Sie auf der Karte darstellen möchten, in Google als Suchbegriff ein.
2. In der Ergebnisseite gehen Sie auf "Maps", um sich die Karte anzeigen zu lassen.
3. Klicken Sie auf das Teilen-Symbol, öffnet sich ein Dialogfenster und die Karte wird für Sie erstellt.
4. Im oberen Bereich sehen Sie einen Code, der mit "<iframe src="https://www.google.com/maps/embed? ..." beginnt.
5. Kopieren Sie den Code-Schnipsel und fügen Sie ihn in den Code Ihrer Webseite an der gewünschten Stelle ein.
Überschrift Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Page</title>
</head>
<body>
<iframe width="250" height="200" src="https://www.youtube.com/embed/WETkb6ENqb0" style="border: 2px solid dodgerblue; margin-top:2rem; margin-bottom: 2rem; display:block; margin-left: auto; margin-right: auto;" allowfullscreen></iframe>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2483.680563427875!2d-0.1268140842535966!3d51.50072917963398!2m3!1f0!2f0!3f0!3m2!1i1024!
2i768!4f13.1!3m3!1m2!1s0x487604c38c8cd1d9%3A0xb78f2474b9a45aa9!2sBig%20Ben!5e0!3m2!1sde!2sch!4v1587664232371!5m2!1sde!2sch"
width="250" height="200" style="border: 2px solid dodgerblue ; margin-top:2rem; margin-bottom: 2rem; display:block; margin-left: auto; margin-right: auto;"></iframe>
<hr>
<iframe id="superFrame" src="einführung.htm" style="width: 100%; height:300px; border: 2px solid dodgerblue" onload="resizeIframe(this)"></iframe>
<script type="text/javascript">
function resizeIframe(iframe) {
if(iframe) {
iframe.height = " ";
iframe.height = iframe.contentWindow.document.body.scrollHeight + 'px';
}
}
</script>
</body>
</html>
Überschrift BrowserAusgabe