code The <iframe> Element
web
What is an iframe?
Inline frame that embeds another HTML document within the current one
<iframe src="https://example.com" width="560" height="315">
<!-- Fallback content -->
Your browser doesn't support iframes.
</iframe>
<!-- Fallback content -->
Your browser doesn't support iframes.
</iframe>
src:
URL of the content to embed
width/height:
Dimensions of the frame
allowfullscreen:
Allow fullscreen mode
smart_display Embedding YouTube Videos
1
Go to YouTube video
2
Click Share → Embed
3
Copy the iframe code
map Embedding Google Maps
1
Go to Google Maps
2
Click Share → Embed a map
3
Copy HTML iframe code
code Code Examples
<iframe width="560" height="315"
src="https://www.youtube.com/embed/VIDEO_ID"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
src="https://www.youtube.com/embed/VIDEO_ID"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
<iframe src="https://www.google.com/maps/embed?pb=MAP_PARAMS"
width="600" height="450"
style="border:0;"
allowfullscreen=""
loading="lazy"
referrerpolicy="no-referrer-when-downgrade">
</iframe>
width="600" height="450"
style="border:0;"
allowfullscreen=""
loading="lazy"
referrerpolicy="no-referrer-when-downgrade">
</iframe>
lightbulb
Best Practice
Always include fallback content inside iframes for browsers that don't support them