Iframes

Windows to Other Worlds

Iframes are like magical portals that grant you glimpses into other realms without leaving the comfort of your own website. Whether it’s videos, maps, or documents, simply embed them, and voilà! – you’ve created a window to another dimension that seamlessly blends into your design. Visitors can explore distant lands without even a single extra click.

But, as with any spell, great power comes with great responsibility. Iframes are marvelous, but they can slow down your kingdom’s loading speed and expose security vulnerabilities if used carelessly. Use them wisely, and your site will become a treasure trove of interactive experiences!

Let’s Keep Going

Embedding External Content
Embedding YouTube Videos

iFrames & YouTube in HTML

Embed external content – videos, maps, and more directly on your page!

Embedding External Content

Stylish Multimedia Elements for Your Website

To embed an iframe in HTML, use the <iframe> element. This allows you to include content such as websites, videos, or maps from other sources directly on your webpage.

<iframe src="https://www.example.com" width="600" height="400" style="border:1px solid #000;"></iframe>

This code snippet adds an iframe displaying an external website (https://www.example.com) to your page.

Embedding YouTube Videos

Struktur und Ordnung auf einen Blick

To embed a YouTube video on your website while respecting privacy, you can use YouTube’s advanced privacy-enhanced mode. This ensures that data is only sent to YouTube when the video is played.

Here’s a step-by-step guide to copy the video URL with privacy-enhanced settings:

Go to the video: Navigate to the YouTube page of the video you want to embed.
Share & embed: Click on “Share” and then “Embed.”
Enable privacy mode: In the embed code options, check the box for “Enable privacy-enhanced mode.” The URL in the code will change from youtube.com to youtube-nocookie.com.
Copy the code: Copy the modified embed code.
Insert into HTML: Paste this code into the HTML section of your website.
This way, the video will only transmit data to YouTube when played, ensuring a more privacy-friendly integration!

<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/WhWc3b3KhnY?si=cZUHTUmnwUh5qVoG" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

Here, you will embed one of the most beautiful Blender short films: Spring.

In this lesson, you have learned…

How to use <iframe> to embed external content like websites, maps, or documents to create interactive experiences on your page.
Why <iframe> acts as a window to other worlds but should be used thoughtfully to minimize loading times and security risks.
Which attributes an <iframe> element needs, such as width, height, and frameborder, to design the embedded window attractively.
How to activate YouTube’s privacy-enhanced mode to ensure tracking only starts when the video is played.

Here you can see the code you’ve practiced – but feel free to experiment! Try out changes, test new ideas, and see what happens. This is your space for tinkering!

Let’s Keep Going