How to Embed Mirador 3 in a Specific Area of a Page

In a previous article, we introduced how to embed Mirador in a specific area of a page using Nuxt.js.

nakamura196.hatenablog.com

This time, we introduce how to embed Mirador without using frameworks like Vue.js.

Specifically, please check the source code of the following page.

https://nakamura196.github.io/nuxt-mirador/embedded2

The above is a simple HTML file.

When embedding Mirador on a page, you specify the ID of the element where Mirador will be displayed (e.g., mirador). By applying the following CSS, you can embed it within a portion of the page.

#mirador {
  height: 600px;
  position: relative;
  width: 100%;
}

The key point is position: relative;. Without this, Mirador will be displayed in full screen even if you specify height or other dimensions.

We hope this article is helpful when using Mirador 3.