Ctrl+K

Embed Images, Videos, HTML, PDF

5.5. Embed Images, Videos, HTML, PDF#

last update: Feb 07, 2024

5.5.1. Embed Images#

  • Simple way to embed images in Juptyer Book is to use ![]() syntax.

  • You can use relative path like ![](figs/fig1.png)

  • You can also use URL like ![](https://.../fig1.png)

  • More advanced way is to use figure directive as below.

```{figure} sample/test.png
---
width: 300px
name: fig1
---
Title
```
../../_images/test.png

Fig. 5.2 Title#

5.5.2. Embed HTML#

<div style="position: relative; margin: 0 auto; width: 100%; padding-bottom: 60%;">
<iframe style="position: absolute; width: 100%; height: 100%;" src="https://en.wikipedia.org/wiki/Main_Page"></iframe>
</div>

5.5.3. Embed PDF#

<div style="position: relative; margin: 0 auto; width: 90%; padding-bottom: 111%;">
<iframe style="position: absolute; width: 100%; height: 100%;" src="sample/test.pdf"></iframe>
    <p>
        Your browser does not support PDF files.
        <a href="sample/test.pdf">Download the file instead</a>
    </p>
</div>

Your browser does not support PDF files. Download the file instead

5.5.4. Embed Videos#

<div style="position: relative; width: 100%; height: 0; padding-bottom: 56.25%;">
<iframe style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" src="https://www.youtube.com/embed/DxL2HoqLbyA"></iframe>
</div>
Contents