admin2/manual_teachbooks
1
0
Fork 0
mirror of https://github.com/TeachBooks/manual.git synced 2026-11-12 22:35:51 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

included different options to embed videos

Browse source
This commit is contained in:
Freek Pols 2024-05-29 09:58:54 +02:00
parent be0a5ef58a
commit 00d3fd1f12
1 changed files with 33 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

58
book/basic-features/recipes.md
View file

@ -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
<paste the HTML code here>
```
**Example:**
```{eval-rst}
.. raw:: html
<iframe width="560" height="315" src="https://www.youtube.com/embed/p-xaYd0hCJ0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
```
2. The embedding code can be included using the iframe directly:
```{code-cell}
<iframe
width="560"
height="315"
@ -44,7 +45,10 @@ Videos uploaded to YouTube can be embedded in the Jupyter Book. There are severa
allowfullscreen
></iframe>
```
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:<br>
<iframe
width="560"
height="315"
@ -54,8 +58,8 @@ Resulting in the video below:
allowfullscreen
></iframe>
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:
```
<div style="display: flex; justify-content: center;">
<div style="position: relative; width: 70%; height: 0; padding-bottom: 56.25%;">
<iframe
@ -70,28 +74,29 @@ Resulting in the video below:
```
With the resulting output:
<div style="display: flex; justify-content: center;">
<div style="position: relative; width: 70%; height: 0; padding-bottom: 56.25%;">
<iframe
<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>
></iframe>
</div>
</div>
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