Responsive Objects

Flexible as a Magical Mirror

Das <object> Element is fantastic for embedding various content into your website, but without the right CSS, it can be as stubborn as an old enchanted mirror, refusing to fit neatly into place!

Fear not, though—with a touch of CSS magic, your <object> becomes not just beautiful but also clever. It adapts gracefully to any screen size, blending seamlessly into your design. Whether on a desktop or a small enchanted viewing box, the right CSS ensures your embedded content stays elegant and poised—almost as if it instinctively knows exactly how much space it needs. No more squabbles, just smooth transitions!

Let’s Keep Going

Object with CSS

An Object

That Adapts

Seamlessly integrate your objects into their surroundings, allowing them to blend perfectly with the design. You can follow the same approach you learned for iframes.

In this example, you use a 16:9 aspect ratio achieved with padding-bottom: 56.25%. The <object> element will then fill the entire container and flexibly adapt to any screen size. You can also enhance your element with additional styles, like borders or shadows, to make it visually appealing and cohesive within your design.
This way, your <object> remains beautifully responsive and fits elegantly into your webpage, no matter the size of your visitor’s device!

HTML

<div class="object-container">
    <object data="file.pdf" type="application/pdf">
    </object>
</div>

CSS

.iframe-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    /* For a 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
}

.iframe-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

In this lesson, you have learned…

How to make the <object> element responsive so that embedded content adapts flexibly to any screen size.
Why a div container with padding-bottom allows you to maintain a fixed aspect ratio, ensuring your embedded object always has the correct dimensions.
How to use position: absolute to perfectly fit the <object> element inside the container, making it automatically stretch or shrink as needed.
How to enhance the <object> visually with additional styles like borders or shadows to harmoniously integrate it into your design.
Why a flexible <object> is especially useful for PDFs or interactive content, ensuring a good appearance on any device without requiring users to zoom or scroll.

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!

The Book of Secrets

Deep within the Library of the Ancients lies a book brimming with magical secrets. Its pages can only be viewed through a digital portal – and that’s where you come in. Use the <object> element to cleverly embed a PDF document into your page. Make sure it adjusts to every screen size, because nothing spoils the magic more than a truncated secret.

Your Task: Embedding and Styling an Object

Embed the PDF Document:
Use the <object> element to embed the PDF file located in the media/ folder.
Set the required attributes:
data: Path to the PDF file, assets/media/elixir-of-light.pdf.
type: application/pdf.
Responsive Design:
Ensure the object is responsive using CSS.
Create classes and a surrounding container to ensure it adjusts gracefully to different screen sizes.
Enhance with Styling:
Add: A border for definition.
A box-shadow for depth and visual appeal.

Open Visual Studio Code and make these words appear on the page. Or try it right here in the editor!

Open Editor in a New Tab

HTML

<div class="object-container">
    <object data="assets/media/elixir-of-light.pdf" type="application/pdf">
    </object>
</div>

CSS

.object-container {
    position: relative;
    width: 90%;
    padding-bottom: 56.25%;
    /* For a 16:9 aspect ratio */
    height: 0;
}

.object-container object {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 2px solid #333;
    /* Optional: Border */
    box-shadow:
        0 4px 8px rgba(0, 0, 0, 0.591);
    /* Optional: Shadow */
}

Let’s Keep Going