From be0a5ef58aee0098c599856827f4b969a5593094 Mon Sep 17 00:00:00 2001 From: Freek Pols Date: Tue, 28 May 2024 08:59:06 +0200 Subject: [PATCH 1/3] include recipes for videos --- book/basic-features/recipes.md | 83 +++++++++++++++++++++++++++++++++- 1 file changed, 82 insertions(+), 1 deletion(-) diff --git a/book/basic-features/recipes.md b/book/basic-features/recipes.md index fda865f..7e8b9ba 100644 --- a/book/basic-features/recipes.md +++ b/book/basic-features/recipes.md @@ -16,7 +16,9 @@ You can find more documentation on including figures [here](https://jupyterbook. ## Videos -MUDE videos are uploaded to the YouTube channel. To embed them in the Jupyter Book, first obtain the embedding link of the video. In order to do so, go to the *YouTube* page of the video (so not the Brightspace page), then click *share* in the description box. There should be a button *embed*, click that. Copy the HTML code that appears in the panel. Then, to embed the video, use the following +Videos uploaded to YouTube can be embedded in the Jupyter Book. There are several ways to do so: + +1. To embed them in the Jupyter Book, first obtain the embedding link of the video. In order to do so, go to the *YouTube* page of the video (so not the Brightspace page), then click *share* in the description box. There should be a button *embed*, click that. Copy the HTML code that appears in the panel. Then, to embed the video, use the following ```{eval-rst} .. raw:: html @@ -24,6 +26,85 @@ MUDE videos are uploaded to the YouTube channel. To embed them in the Jupyter Bo ``` +**Example:** +```{eval-rst} +.. raw:: html + + +``` + +2. The embedding code can be included using the iframe directly: +```{code-cell} + +``` +Resulting in the video below: + + +3. The above solution can be 'upgraded', setting a scaling of the video with the width of the screen and align it to the center: +```{code-cell} +
+
+ +
+
+``` +With the resulting output: +
+
+ +
+
+ +4. 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] + from IPython.display import YouTubeVideo + VideoWidth=600 + YouTubeVideo("YDBr1Lof_mI", width=VideoWidth, align='center') + ``` + +Moreover, it requires one to have this code at the top of your markdown file: + + --- + jupytext: + text_representation: + extension: .md + format_name: myst + format_version: 0.13 + jupytext_version: 1.10.3 + kernelspec: + display_name: Python 3 (ipykernel) + language: python + name: python3 + --- + ## Equations Equations can be included in two ways: inline or display mode. To make an inline equation, just put the LaTeX equation between \$-signs. For example, `$F = m \cdot a$` produces: $F = m \cdot a$. From 00d3fd1f12d864c224dfe91220616be8fcf26ffc Mon Sep 17 00:00:00 2001 From: Freek Pols Date: Wed, 29 May 2024 09:58:54 +0200 Subject: [PATCH 2/3] included different options to embed videos --- book/basic-features/recipes.md | 58 +++++++++++++++++++--------------- 1 file changed, 33 insertions(+), 25 deletions(-) diff --git a/book/basic-features/recipes.md b/book/basic-features/recipes.md index 7e8b9ba..eaa8af4 100644 --- a/book/basic-features/recipes.md +++ b/book/basic-features/recipes.md @@ -16,25 +16,26 @@ You can find more documentation on including figures [here](https://jupyterbook. ## Videos +--- +jupytext: + text_representation: + extension: .md + format_name: myst + format_version: 0.13 + jupytext_version: 1.10.3 +kernelspec: + display_name: Python 3 (ipykernel) + language: python + name: python3 +--- + +## Videos + Videos uploaded to YouTube can be embedded in the Jupyter Book. There are several ways to do so: -1. To embed them in the Jupyter Book, first obtain the embedding link of the video. In order to do so, go to the *YouTube* page of the video (so not the Brightspace page), then click *share* in the description box. There should be a button *embed*, click that. Copy the HTML code that appears in the panel. Then, to embed the video, use the following +**1.** To embed them in the Jupyter Book, first obtain the embedding link of the video. In order to do so, go to the *YouTube* page of the video (so not the Brightspace page), then click *share* in the description box. There should be a button *embed*, click that. Copy the HTML code that appears in the panel. Then, to embed the video, use the following - ```{eval-rst} - .. raw:: html - - - ``` - -**Example:** -```{eval-rst} -.. raw:: html - - ``` - -2. The embedding code can be included using the iframe directly: -```{code-cell} ``` -Resulting in the video below: + +This HTML-iframe code can be directly included in the markdown file (no need to create a code-cell). + +Resulting in the video below:
-3. The above solution can be 'upgraded', setting a scaling of the video with the width of the screen and align it to the center: -```{code-cell} +**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: +```
-
+ > +
-4. 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. - +**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. +```` ```{code-cell} ipython3 :tags: [remove-input] from IPython.display import YouTubeVideo VideoWidth=600 YouTubeVideo("YDBr1Lof_mI", width=VideoWidth, align='center') ``` +```` Moreover, it requires one to have this code at the top of your markdown file: - +``` --- jupytext: text_representation: @@ -104,6 +109,9 @@ Moreover, it requires one to have this code at the top of your markdown file: language: python name: python3 --- +``` +Note that this is not needed when you use a .ipynb (jupyter notebook) file. + ## Equations From 90318121320ebf4bc0838bea2d799d8ac94eeb10 Mon Sep 17 00:00:00 2001 From: Tom van Woudenberg Date: Wed, 29 May 2024 10:09:46 +0200 Subject: [PATCH 3/3] Fix jupytext thingy --- book/basic-features/recipes.md | 29 ++++++++++++++--------------- 1 file changed, 14 insertions(+), 15 deletions(-) diff --git a/book/basic-features/recipes.md b/book/basic-features/recipes.md index eaa8af4..81e0a90 100644 --- a/book/basic-features/recipes.md +++ b/book/basic-features/recipes.md @@ -1,3 +1,17 @@ +--- +jupytext: + text_representation: + extension: .md + format_name: myst + format_version: 0.13 + jupytext_version: 1.10.3 +kernelspec: + display_name: Python 3 (ipykernel) + language: python + name: python3 +--- + + # Markdown and Notebook recipes for the MUDE Jupyter Book ## Figures @@ -16,21 +30,6 @@ You can find more documentation on including figures [here](https://jupyterbook. ## Videos ---- -jupytext: - text_representation: - extension: .md - format_name: myst - format_version: 0.13 - jupytext_version: 1.10.3 -kernelspec: - display_name: Python 3 (ipykernel) - language: python - name: python3 ---- - -## Videos - Videos uploaded to YouTube can be embedded in the Jupyter Book. There are several ways to do so: **1.** To embed them in the Jupyter Book, first obtain the embedding link of the video. In order to do so, go to the *YouTube* page of the video (so not the Brightspace page), then click *share* in the description box. There should be a button *embed*, click that. Copy the HTML code that appears in the panel. Then, to embed the video, use the following