Embedding Objects

A magical window to versatile content

The <object> element is like an enchanted portal, allowing you to embed various external content directly into your webpage. Whether it’s a PDF, a video, an image, or another multimedia file, <object> opens a window that seamlessly integrates these elements into your design without disrupting its structure.

Unlike other elements, <object> is highly versatile, capable of displaying a wide range of file types. And if something goes awry and the content doesn’t load, it casts a fallback spell—a handy alternative to ensure your users are never left empty-handed. This way, your page always looks polished and functions smoothly, no matter what device or browser is being used.

Let’s Keep Going

Object

The Magical Portal of Content

With the <object> element, you open a window to a PDF file (file.pdf) that fits perfectly into your layout with dimensions of 600×400 pixels. The data attribute ensures the content is loaded, while the type attribute whispers to the browser what exactly to display (in this case, a PDF).
But if the browser decides to be stubborn and refuses to display the file, our fallback activates: a magical download link guiding users to their destination nonetheless. This way, no one is left out in the rain!

<object data="file.pdf" type="application/pdf" width="600" height="400">
    Oh no, your browser refuses to display the PDF! No worries, here's a
    <a href="file.pdf">magical download link</a> to help you out.
</object>

In this lesson, you have learned…

How to embed versatile content with <object>, including PDFs, images, videos, or other multimedia files.
Why the data attribute specifies the file path and the type attribute tells the browser what kind of content to display.
Why <object> is more flexible than <iframe>, as it supports various file formats.
How to provide fallback text or a download link so users can still access the content if their browser doesn’t support the <object> element.
How to adjust the size and position of the embedded object to seamlessly integrate it into your webpage layout.

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