TeachBooks · Tom-van-Woudenberg · Feb 20, 2025 · Feb 20, 2025 · Feb 20, 2025 · Feb 20, 2025
diff --git a/book/basic-features/videos.md b/book/basic-features/videos.md
@@ -28,46 +28,21 @@ Videos uploaded to YouTube can be embedded in the Jupyter Book. There are severa
     ></iframe>
 ```
 
-This HTML-iframe code can be directly included in the markdown file (no need to create a code-cell).
+The src can be used in combination with [](../external/sphinx-iframes/README.md):
 
-Resulting in the video below:<br>
-    <iframe
-    width="560"   
-    height="315"
-    src="https://www.youtube.com/embed/UCb-b82tzLo?"
-    align="center"
-    frameborder="0"
-    allowfullscreen
-    ></iframe>
-
-**2.** The above solution can be 'upgraded', setting a scaling of the video with the width of the screen and align it to the center:
+````
+```{video} https://www.youtube.com/embed/UCb-b82tzLo?
 ```
-    <div style="display: flex; justify-content: center;">
-    <div style="position: relative; width: 70%; height: 0; padding-bottom: 56.25%;">
-        <iframe
-            src="https://www.youtube.com/embed/YDBr1Lof_mI?si=RhTC31XHv-6gL4Kl"
-            style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
-            frameborder="0"
-            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-            allowfullscreen
-        ></iframe>
-    </div>
-    </div>
+````
+
+Or the HTML-iframe code can be directly included in the markdown file.
+
+Resulting in the video below:
+
+```{video} https://www.youtube.com/embed/UCb-b82tzLo?
 ```
-With the resulting output:
-<div style="display: flex; justify-content: center;">
-    <div style="position: relative; width: 70%; height: 0; padding-bottom: 56.25%;">
-        <iframe
-        src="https://www.youtube.com/embed/YDBr1Lof_mI?si=RhTC31XHv-6gL4Kl"
-        style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
-        frameborder="0"
-        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-        allowfullscreen
-        ></iframe>
-    </div>
-</div>
 
-**3.** Another option is to use a python coding cell. As this code cell should be run when the book is made, you have to change the config file and set `execute_notebooks:` to force. This comes with the downside that it takes considerable more time to deploy the book.
+**2.** Another option is to use a python coding cell. As this code cell should be run when the book is made, you have to change the config file and set `execute_notebooks:` to force. This comes with the downside that it takes considerable more time to deploy the book.
 ````
     ```{code-cell} ipython3
     :tags: [remove-input]

diff --git a/book/features/HTML_javascript.md b/book/features/HTML_javascript.md
@@ -11,10 +11,19 @@ In this section, we will discuss how to [create](creating_basic_HTML_elements.md
 
 This could be for example interactive 3d figures:
 
-<iframe src="../_static/element_render_box.html" width="600" height="400" frameborder="0"></iframe> 
+```{iframe} ../_static/element_render_box.html
+:width: 600px
+:height: 400px
+```
 
 Or other interactive graphs:
 
-<iframe src="../_static/element_pdf_and_cdf.html" width="600" height="300" frameborder="0"></iframe>
+```{iframe} ../_static/element_pdf_and_cdf.html
+:width: 600px
+:height: 300px
+```
 
-<iframe src="https://openla.ewi.tudelft.nl/applet/lines_and_planes/normal_equation_plane_origin?iframe=true"  width="600" height="500" allow="fullscreen" loading="lazy" frameborder="0"></iframe>
+```{iframe} https://openla.ewi.tudelft.nl/applet/lines_and_planes/normal_equation_plane_origin?iframe=true
+:width: 600px
+:height: 500px
+```
diff --git a/book/features/adding_HTML_elements.md b/book/features/adding_HTML_elements.md
@@ -4,13 +4,25 @@
 
 In this section, we will discuss how to embed interactive elements created in HTML/JavaScript in a TeachBook. If you are interested in learning how to create these elements yourself, we will discuss an example in the [next article](creating_basic_HTML_elements.md). As an example, let us discuss how to embed an interactive 3D model of a subsurface environment I created:
 
-<iframe src="../_static/element_render_box.html" width="600" height="400" frameborder="0"></iframe> 
+```{iframe} ../_static/element_render_box.html
+:width: 600px
+:height: 400px
+```
 
 ## Storing the HTML file
 TeachBooks like this one are built from a Git project, comprising of different files and folders that are assembled into a webpage. It is generally not possible to paste the code of your HTML element directly into one of the project's Markdown files. Instead, you will have to store the files separately somewhere in the folder structure, then embed them later on. For this project, the book's root folder contains a ´_static´ folder which we can use to store our HTML/JS file. Some elemenets - such as the one above - may require additional files. The HTML element above, for instance, specifies a renderer using [THREE.js](https://threejs.org/) that displays a digital model. This model is specified as an .obj file (which defines its geometry) and a .mtl file (which defines its materials - its colors, reflectivity, transparency, and so on). We can store these files in the same ´_static´ folder.
 
 ## Embedding HTML files via iframes
-If we want to embed our HTML/JS element in a Markdown page, we must use an inline frame, also known as an iframe. In code, an iframe looks like this:
+If we want to embed our HTML/JS element in a Markdown page, we must use an inline frame, also known as an iframe. In a book, an iframe can be added using [](../external/sphinx-iframes/README.md):
+
+````
+```{iframe} ../_static/element_render_box.html
+:width: 600px
+:height: 300px
+```
+````
+
+or alternatively using raw HTML:
 
 ```html
 <iframe src="../_static/element_render box.html" width="600" height="300" frameborder="0"></iframe>

diff --git a/book/features/creating_basic_HTML_elements.md b/book/features/creating_basic_HTML_elements.md
@@ -1,6 +1,9 @@
 # Creating basic interactive HTML/JavaScript elements
 
-<iframe src="../_static/element_pdf_and_cdf.html" width="600" height="300" frameborder="0"></iframe>
+```{iframe} ../_static/element_pdf_and_cdf.html
+:width: 600px
+:height: 300px
+```
 
 At the bottom of this page, I will provide the full code for the interactive element above. In this section, let us go through the code one piece at a time. Let us begin from the top.
 

diff --git a/book/features/h5p.md b/book/features/h5p.md
@@ -8,10 +8,16 @@ This section is useful for user type 3-5.
 {bdg-danger}`iframe`
 
 ## Instruction
-H5p elements are interactive HTML-blocks which can be embedded in a Jupyter Book using an iframe. An H5p element can be created in the [TU Delft portal on the H5p website](https://tudelft.h5p.com/content) (sign in via Brightspace to H5p required first). The iframe code can be copied at Edit - Publish - Public - Embed code. This html code can be directly added to your markdown file:
+H5p elements are interactive HTML-blocks which can be embedded in a Jupyter Book using an iframe. An H5p element can be created in the [TU Delft portal on the H5p website](https://tudelft.h5p.com/content) (sign in via Brightspace to H5p required first). The iframe code can be copied at Edit - Publish - Public - Embed code. This html code can be directly added to your markdown file using [](../external/sphinx-iframes/README.md):
 
+````
+```{h5p} https://....h5p.com/content/.../embed
+```
+````
+
+Alternative, you can use raw html:
 ```html
-<iframe src="https://tudelft.h5p.com/content/.../embed" aria-label="..." width="1088" height="200" frameborder="0" allowfullscreen="allowfullscreen" allow="autoplay *; geolocation *; microphone *; camera *; midi *; encrypted-media *"></iframe><script src="https://tudelft.h5p.com/js/h5p-resizer.js" charset="UTF-8"></script>
+<iframe src="https://....h5p.com/content/.../embed" aria-label="..." width="1088" height="200" frameborder="0" allowfullscreen="allowfullscreen" allow="autoplay *; geolocation *; microphone *; camera *; midi *; encrypted-media *"></iframe><script src="https://tudelft.h5p.com/js/h5p-resizer.js" charset="UTF-8"></script>
 ```
 
 A full list of all available interactive elements is available on the website of [H5p](https://h5p.org/content-types-and-applications), these include among others:
@@ -34,5 +40,5 @@ Bars and hinges in truss structure
 
 Now that you've been introduced to truss structures, answer the following question:
 
-
-<iframe src="https://tudelft.h5p.com/content/1291910926067816717/embed" aria-label="Modelling truss structures" width="1088" height="200" frameborder="0" allowfullscreen="allowfullscreen" allow="autoplay *; geolocation *; microphone *; camera *; midi *; encrypted-media *"></iframe><script src="https://tudelft.h5p.com/js/h5p-resizer.js" charset="UTF-8"></script>
+```{h5p} https://tudelft.h5p.com/content/1291910926067816717/embed
+```
diff --git a/book/features/interactive_element.ipynb b/book/features/interactive_element.ipynb
@@ -291,7 +291,9 @@
    },
    "source": [
     "## H5p\n",
-    "<iframe src=\"https://tudelft.h5p.com/content/1292010272694757307/embed\" aria-label=\"Exmple MUDE\" width=\"1088\" height=\"637\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\" allow=\"autoplay *; geolocation *; microphone *; camera *; midi *; encrypted-media *\"></iframe><script src=\"https://tudelft.h5p.com/js/h5p-resizer.js\" charset=\"UTF-8\"></script>"
+    "\n",
+    "```{h5p} https://tudelft.h5p.com/content/1292010272694757307/embed\n",
+    "```\n"
    ]
   },
   {
@@ -302,7 +304,15 @@
    },
    "source": [
     "## Grasple\n",
-    "<iframe height=\"560\" src=\"https://embed.grasple.com/exercises/156d55e4-8198-4bc7-a2c1-c0cb0ff3fef8?id=80710\" title=\"Grasple Exercise 80710\" width=\"100%\" allow=\"clipboard-read; clipboard-write\"></iframe>"
+    "\n",
+    "::::{grasple}\n",
+    ":iframeclass: dark-light\n",
+    ":url: https://embed.grasple.com/exercises/156d55e4-8198-4bc7-a2c1-c0cb0ff3fef8?id=80710\n",
+    ":label: grasple_exercise_80710\n",
+    ":dropdown:\n",
+    ":description: Example exercise\n",
+    "\n",
+    "::::"
    ]
   },
   {
@@ -313,7 +323,10 @@
     "\n",
     "The example below shows a custom HTML/Javascript element\n",
     "\n",
-    "<iframe src=\"../_static/element_pdf_and_cdf.html\" width=\"600\" height=\"300\" frameborder=\"0\"></iframe>"
+    "```{iframe} ../_static/element_pdf_and_cdf.html\n",
+    ":width: 600px\n",
+    ":height: 300px\n",
+    "```"
    ]
   },
   {

diff --git a/book/intro/book.md b/book/intro/book.md
@@ -2,17 +2,8 @@
 
 Never seen a TeachBook before? Here's a small demo of our MUDE-book!
 
-<div style="display: flex; justify-content: center;">
-    <div style="position: relative; width: 100%; height: 0; padding-bottom: 56.25%;">
-        <iframe
-            src="https://www.youtube.com/embed/gbBsWo6em4c?si=ayKhISsx06LmGbDD"
-            style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
-            frameborder="0"
-            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-            allowfullscreen
-        ></iframe>
-    </div>
-</div>
+```{video} https://www.youtube.com/embed/gbBsWo6em4c?si=ayKhISsx06LmGbDD
+```
 
 So what are you looking at? It's a website generated with the [Jupyter Book package](https://jupyterbook.org/). Various extensions have been added to improve the student-experience, especially for technical topics! The actual website you're looking at now is a Jupyter Book. With TeachBooks we aim to make it easy to collaboratively use it, even if you've little experience with the software package which is part of it.