How to embed slides on a web page?

[jeertmans]

From @TommyLITommy (#448 (comment))

Hi Jérome, I saw the examples on your manim-slides website, so how did you embeded the slides on the web?

[jeertmans]

Embedding slides on the web is relatively simple, and can be performed in two steps:

1. Convert your animations to an HTML file with manim-slides convert MySlides slides.html, see the documentation;
2. In your web page (I assume index.html, but it can be any HTML page), add the following:

<div style="position:relative;padding-bottom:56.25%;">
    <!-- 56.25 comes from aspect ratio of 16:9, change this accordingly -->
    <iframe
        style="width:100%;height:100%;position:absolute;left:0px;top:0px;"
        frameborder="0"
        width="100%"
        height="100%"
        allowfullscreen
        allow="autoplay"
        src="slides.html">
    </iframe>
</div>

Important

You need to make sure that the path to slides.html is relative to index.html or to the site assets folder.

A detailed guide is available in the Sharing HTML and animation files section of the online documentation.

For example, I use Manim Slides to publish my conference slides on my website, and I save the animation files in the assets/slides folder. See repository: https://github.com/jeertmans/jeertmans.github.io.

Online documentation

If you are using Sphinx to render a documentation, you can use the Sphinx directive to include interactive slides online!

Single page case

If you just want to share your animations on a webpage, and you do not want to create a website just for this, you can take a look at the manim-slides-starter repository, that automates most of the process.

Then, your slides will be accessible online thanks to GitHub pages¹, see example.

Footnotes

1. You don't actually need to bother creating GitHub pages. ↩