Sphinxでの動画の貼り方 — 螺旋階段を一歩ずつ

はじめに

前回の画像 に続いて、今回は動画の貼り方。Sphinx拡張（Sphinx extension）というプラグイン機能を使う。貼り付けるのは

で、それぞれに対応したSphinx拡張がある。

Sphinx拡張の導入

sphinx-contribリポジトリから

のディレクトリ（フォルダ）をダウンロード。

インストール方法は次のどちらでもオッケー（参考）。

site-packages ディレクトリにインストール

ダウンロードした各ディレクトリに移動して

% cd dir
% python setup.py build
% sudo python setup.py install

でインストール完了。

Sphinxプロジェクトのルート下に設置

もしくは、プロジェクトのルート下のディレクトリ（例えば、exts）に次を設置してconf.pyを編集。

youtube.py
nicovideo.py

Note

conf.py

import sys
import os

# If extensions (or modules to document with autodoc) are in another directory,
# add these directories to sys.path here. If the directory is relative to the
# documentation root, use os.path.abspath to make it absolute, like shown here.
#sys.path.insert(0, os.path.abspath('.'))

sys.path.insert(0, os.path.abspath('exts'))

さいごに、Sphinx拡張の有効化。

Note

conf.py

# Add other Sphinx extensions here
extensions = [
    'sphinxcontrib.youtube',
    'sphinxcontrib.nicovideo'
]

インストールできていない場合はこんなエラーが出る。

Warning

ビルド時のエラー

Extension error:
Could not import extension sphinxcontrib.youtube (exception: No module named youtube)

具体例

Note

Sphinxでの動画ディレクティブ

.. youtube:: ecOZrN8_a3Y

.. nicovideo:: sm16

YouTube アニマス神シーン集

ニコニコ動画アイドルマスター最古の動画 - ニコニコ大百科

レスポンシブに対応

貼り付けた動画のサイズを変化させるために、こんなreSTにしている。

.. container:: video-wrapper

    .. container:: video-container

        .. youtube:: ecOZrN8_a3Y

.. container:: video-wrapper

    .. container:: video-container

        .. nicovideo:: sm16

containerディレクティブについてはこことかココを参考にしてください。

HTMLで外部の<div>を生成してます。

Note

HTML & CSS

<div class="video-wrapper container">
    <div class="video-container container">
        <!-- <iframe> or <embed> -->
    </div>
</div>

/* CSS for video wrap */
.container {
    /* bootstrap reset */
    width: auto;
    margin-right: 0;
    margin-left: 0;
}

.video-container {
    position: relative;
    margin-top: 1.2em;
    margin-bottom: 1.2em;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

.video-wrapper {
    /* max size setting */
    width: 500px;
    max-width: 100%;
}

参考にしました

実際にiPhoneで見てみると、ニコニコ動画は再生ボタンが行方不明になります...

video_iphoneview by hironow365, on Flickr

なので、サムネイルの方が分かりやすいでしょう。

ニコニコ動画サムネイル

Note

Sphinxでのディレクティブ

.. nicovideo:: sm16
    :thumb:

ここでもサイズ変更のために、こんなreSTにしている。

.. container:: video-wrapper-thumb

    .. container:: video-container

        .. nicovideo:: sm16
            :thumb:

Note

CSS

/* CSS for niconico thumbnail */
.video-wrapper-thumb {
    /* max size setting */
    width: 312px;
    max-width: 100%;
}

.video-wrapper-thumb iframe {
    /* thumb re design */
    border: none !important;
}