Besides ordinary running text, you can also insert media in your document flow. This lesson details what type of media can be used in your document, and how to upload media files.

Images are inserted in a document by using the \includegraphics command.

2.1 Vector images

PDF images are not handled natively in HTML 5, which means, in practice, that PDF illustrations cannot be inserted into the flow of a web page. The same applies to EPS files.

The only supported vector file format in HTML 5 is SVG. Here is a sample SVG illustration.

Pan/Zoom

2.2 Raster images

LaTeX2Web supports the following file formats:

• JPG/JPEG
• PNG
• GIF

Animated GIFs also work. Here is a JPG photo (which has been compressed before upload).

Pan/Zoom

And an animated GIF.

Pan/Zoom

2.3 Figures

\begin{figure}
\includegraphics{path or url of the image}
\caption{the figure caption}
\end{figure}

2.4 Image/figure grids

You can place multiple images in a grid. To do so, simply use several \includegraphics commands in the body of the figure environment.

Pan/Zoom

Pan/Zoom

To obtain something more elaborate, you can use the subfigure environment several times inside the figure. Let us have a look at the code.

\begin{figure}
\caption{Observe how the grid behaves when resizing the browser window.}
\begin{subfigure}
\includegraphics{4600_8-02.svg}
\caption{A cute space cat}
\end{subfigure}
\begin{subfigure}
\includegraphics{cute-cat-with-blue-eyes-2024-10-14-17-06-59-utc.jpg}
\caption{Cuteness overload}
\end{subfigure}
\begin{subfigure}
\includegraphics{mlvseq9yvZhba.gif}
\caption{Not ALL cats are cute}
\end{subfigure}
\end{figure}

Here is the result.

Pan/Zoom

Pan/Zoom

Pan/Zoom

2.5 Image links

Image can be used as links. This image leads to the Documents Live home page.

Here is the code.

\begin{imageLink}
\url{https://documents.live/}
\imageUrl{house.jpg}
\alt{link to LaTeX2Web home page}
\caption{Click on this image to go to the Documents Live home page}
\end{imageLink}

LaTeX2Web supports four kinds of video:

• Videos hosted on the Mux platform by Documents Live. You can upload videos to your account by visiting the Mux video dashboard . This feature is reserved to Documents Live subscribers.
• Remote videos in the mp4 format
• YouTube videos
• Vimeo videos

Here is an example with the following code.

\begin{video}
\theme{red, 24}
\url{a1r1sgxcBJI902avWpkNUGVdv2ukUfNtZ6ndsmEsX8Ug}
\type{mux}
\end{video}

And here is the result.

If specified, a theme can be applied to the viseo player. For backward compatibility, you can specify one of the four keyword as a argument for the command: city, fantasy, forest and sea.

In general, the argument for the \theme command should a comma separated list of two values: a standard HTML color , and a valid CSS size. For instance, the following YouTube video uses the following command

\theme{red, 24}

This means that the theme color will be set to red, and the controls will be sized at a value of 24px.

Here is the YouTube example.

Here is the code.

\begin{video}
\theme{red, 24}
\url{https://youtu.be/ElDRYDgSUO0?si=5uVw525mx99F3p3k}
\type{youtube}
\caption{A YouTube video featuring the LaTeX2Web Inline Editor}
\end{video}

You can also add an interactive transcript of the video! When you click somewhere in the transcript, the video is brought to the corresponding segment.

For more details on video in LaTeX2Web, see the online help .

If you have a subtitle file (.srt format), related to a video, you can add an interactive transcript to videos. Here is an example. To see it in action, follow these steps.

1. Reveal the transcript by clicking on the "Transcript" toggler.
2. Click on any text in the transcript.

This will bring immediately the video to the text that you have clicked.

Here is the code.

\begin{video}
\url{022SoBc1wsvTvyIms6ofTTJKuSl1z3kmkyoQTCvPX00i8}
\type{mux}
\srt{Create a document from scratch.srt}
\caption{A video with an interactive transcript}
\end{video}

The .srt subtitle file is uploaded via the general upload media mechanism.

Standalone subtitles are subtitle blocks that live outside video objects. To function properly, the corresponding video must be referenced in the subtitle object.

5.1 Step one: prepare the video

\videolabel{from-scratch}

5.2 Create the subtitle block

\begin{subtitle}
\videoref{from-scratch}

20
00:01:53,795 --> 00:01:55,595
We are going to edit a paragraph to

21
00:01:55,595 --> 00:01:57,195
replace a markup styling by

22
00:01:57,195 --> 00:01:58,895
documents live proper styling.

23
00:02:02,194 --> 00:02:03,994
We are going to properly, apply the

24
00:02:03,994 --> 00:02:06,194
italic style to portions of the

25
00:02:06,194 --> 00:02:08,494
paragraph, which are enclosed by an

26
00:02:08,494 --> 00:02:09,994
underscore.  To do this,

27
00:02:09,994 --> 00:02:11,994
we look for underscore, select the

28
00:02:11,994 --> 00:02:14,594
text and use an editor shortcut to

29
00:02:14,594 --> 00:02:16,194
apply the italic style to it.

\end{subtitle}

Audio in the mp3 format is supported. Here is an example.

Here is the code.

\begin{audio}
\url{path or url of the audio}
\end{audio}

In general, it is simpler to host your media along your document. You may already have media available if you have uploaded an existing LaTeX project. You can upload media files to your project at any type.

To do so, go to your dashboard and, from the action menu, select “Upload media”. You are then re-directed to an upload page. You can either upload single media files or a zip archive of such files.

To see (notably) the list of media files for a document, select “Get media info” in the action menu.