Adding a picture or video is the easy part. Making it load efficiently and understandable to every visitor is the real goal.
What You Need to Know
The allow attribute controls selected powerful features an iframe may request, subject to browser permissions policy. It is not a blanket permission for the embedded page to do anything it wants.
In this example: allow fullscreen in a video iframe.
Try the Example
Take a look at the example. We’ll explain the important lines right below it.
<iframe src="/embeds/video.html" title="Video lesson"
allow="fullscreen" loading="lazy" allowfullscreen></iframe>Let’s Read the Code
- <iframe>: An iframe embeds a separate document with its own URL and security context.
- src: Src identifies a resource path for images, frames, or media.
- allow: Allow provides permission-policy permissions to an embedded frame.
Read the named elements and attributes together. They explain how the browser connects this feature to the rest of the page.
What Happens in the Browser?
The paths shown here refer to files in your own example project. Put real images and recordings in those locations before expecting them to load.
Remember the boundary. Embedded content may be a separate document, sometimes provided by another company. Give it a readable title or alternative, and check what permissions and information its request may expose.
Your Turn
Try changing one file path or attribute. Notice whether the browser falls back to another source or shows missing content.
Common Beginner Mistakes
- Leaving out real media files or understandable text alternatives.
- Media and remote embeds can use significant bandwidth or reveal a visitor’s network information to another provider.
Key Takeaways
- The allow attribute controls selected powerful features an iframe may request, subject to browser permissions policy.
- <iframe>: An iframe embeds a separate document with its own URL and security context.
- If the resource cannot load, users still need enough text to understand what was meant to be there.