Markdown で動画を埋め込む方法を解説！Markdown 上でストリーミング再生も可能に

2024-04-172024-04-22

昨今では情報共有の場で画像やテキストではなく、動画を活用して情報やナレッジを残すという方法が主流となっています。そのような潮流のなかで、情報共有ツールの中でも動画の埋め込みが可能かどうかはツールの選定条件に大きく影響する声をよく耳にします。

情報共有ツールといえば、Markdown を活用することで効率的な文書作成を可能にしているケースが多いかと思います。この記事では、Markdown エディタを活用する中で、動画を活用して情報共有をする方法をご紹介します。

なお、こちらの記事で紹介する方法は、社内wikiツール GROWI.cloud の Markdown エディタで動画を表示させる方法となっています。そのため、お使いの Markdown エディタでは動画の埋め込みができないケースもありますので予めご了承ください。

※Markdown エディタにおける画像の挿入方法については、Markdown で画像を表示する方法：表示サイズの調整やリンクの挿入方法も併せてご紹介 をご確認ください

Markdown で動画を埋め込む2種類の方法

Markdown エディタにおいて、主な動画を埋め込む方法としては、動画ファイルをアップロードして埋め込む方法と、Youtube にアップロードされている動画を埋め込む方法の2種類が挙げられます。

方法1：動画ファイルをアップロードして埋め込む方法

基本的な動画ファイルの埋め込み方法

動画ファイルを Markdown エディタ上でストリーミング再生させるためには、「<video>タグ」を活用し HTML を記述することで動画の挿入が可能です。具体的な記述としては以下を参考にしてください。

■記述内容

<video src="動画の URL" controls="true"></video>

■実際の表示内容

埋め込んだ動画ファイルの表示サイズを調整する方法

前述の方法を実践することで、Markdown エディタ内での動画の埋め込み及びストリーミング再生が可能になります。

また、HTML で動画を埋め込んでいるため、HTML の「height 属性」や「width 属性」を追加することで埋め込む動画の表示サイズを調整することが可能です。

■記述内容（サイズの調整）

<video src="/attachment/661f6a253d7ff88f85443283" controls="true" width="600"></video>

■実際の表示内容

方法2：Youtube 動画を埋め込む方法

上記の方法は、自身で動画をアップロードしたうえで、その動画をストリーミング再生する方法でしたが、Youtube にアップロードされている動画をエディタ上に埋め込む方法をご紹介します。

Youtube 動画を埋め込むためには「<div>タグ」と「<iframe>タグ」を組み合わせることで実現が可能です。なお、こちらの方法も HTML を活用するため、各種属性を適用することで表示サイズの調整などを適用させることも可能です。

■記述内容（最低限必要な記述内容）

<div>
<iframe src="https://www.youtube.com/embed/youtubeの動画ID></iframe>
</div>

■記述内容（表示サイズの調整済み）

<div>
<iframe width="600" height="400" src="https://www.youtube.com/embed/youtubeの動画ID"></iframe>
</div>

■実際の表示内容

まとめ

この記事では Markdown エディタにおいて動画を埋め込む方法についてご紹介しました。

その他の Markdown 記法と同様に、エディタによっては動画の埋め込みができるかどうかが異なります。Markdown エディタを採用する際の基準として、動画の埋め込みは可能かどうかを認識しておくと、組織に定着しやすいツールの選定ができるかと思います。

今回使用イメージとして紹介している、社内wiki GROWI.cloud では HTML を適用することが可能なので、動画の埋め込みも可能となっています。

その他の Markdown の記法一覧は「【画像で解説】Markdown 記法一覧表・チートシート」から確認できるので、そちらも併せてご確認ください。