Images and videos¶

Here are the examples of images and videos in Shibuya sphinx theme.

Images¶

image directive¶

A simple image with image directive:

.. image:: /_static/images/cat.jpg

align image¶

With :align: option, you can make the image float to left or right:

.. image:: /_static/icon-light.svg
  :align: left
  :height: 200
  :width: 200

This is a lot of text to go along with a left-aligned image, that is helping make this content feel less linear. It is important to have such a body of text, since the image is meant to be “floated” to the right, which would interfere with the rest of the document otherwise.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis sapiente veritatis doloribus accusantium molestiae modi recusandae excepturi facere, corrupti expedita sit.

Hint

You can use :align: right to float image to the right side.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis sapiente veritatis doloribus accusantium molestiae modi recusandae excepturi facere, corrupti expedita sit.

figure with captions¶

The figure directive will wrap the image with <figure> tag, content if figure directive will be converted to <figcaption>.

Image with a caption¶

.. figure:: /_static/images/dog.jpg
   :width: 800
   :align: center

   This is the ``caption``, *it can* contain **other markups**.

../../_images/dog.jpg — This is the `caption`, *it can* contain **other markups**.¶

Containers¶

We offer several container classes to decorate images:

.. container:: image-1

    .. image:: /_static/images/cat.jpg

.. container:: image-2

    .. image:: /_static/images/cat.jpg

Light and Dark¶

You can utilize the light-only and dark-only classes to specify which media to display in light or dark mode. For instance, in the example below, it will show a dog in light mode and a cat in dark mode.

light and dark mode images¶

.. figure:: /_static/images/cat.jpg
   :figclass: light-only
   :width: 800
   :align: center

.. figure:: /_static/images/dog.jpg
   :figclass: dark-only
   :width: 800
   :align: center

Videos¶

There is no built-in video directive for Sphinx. But you can use these extensions instead:

sphinxcontrib-video¶

Documentation: https://sphinxcontrib-video.readthedocs.io/
Source Code: https://github.com/sphinx-contrib/video

Here is an example of video directive:

.. video:: https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm

sphinxcontrib-youtube¶

Documentation: https://sphinxcontrib-youtube.readthedocs.io/
Source Code: https://github.com/sphinx-contrib/youtube

Here is an example of youtube directive:

.. youtube:: j2BdNDTlWbo
   :width: 100%

Containers¶

We offer several container classes to decorate videos:

.. container:: video-1

  .. youtube:: j2BdNDTlWbo
      :width: 100%

.. container:: video-1

  .. video:: https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm

.. container:: video-2

  .. youtube:: j2BdNDTlWbo
      :width: 100%

.. container:: video-2

  .. video:: https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm

Audio¶

There is no extension for audios, you can use raw directive with <audio> HTML tag.

.. raw:: html

    <audio controls src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3"></audio>