
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. |

<!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> |
