ぶりぶーです。しばらく事情により立て込んでいますが、またぼちぼち記事を書いていきたいと思います！
さて、本記事では題の通り、Marpというスライド生成ツールで、YouTubeの動画をスライドに挿入して再生する方法を解説します。
目的
YouTubeの動画をスライドに埋め込みます。
デバイス内に保存してある動画を埋め込む方法については、次の過去記事を参照してみてください。
また、動画でなく、画像を埋め込みたい場合は次の過去記事を...
想定環境
- Marp for VS Code
- VS Code
方法
YouTubeの埋め込みはカンタンです！
なぜなら、YouTubeが埋め込むためのコードを生成してくれるからです。
① 目的のYouTube動画まで行く
ふつうにweb検索でOKです。
挿入したいYouTubeの動画の画面を開きます。
② 埋め込みコードをコピーする
次に紹介するどちらの方法でも問題ないです。
方法A
共有ボタンをクリックして、埋め込むをクリックします。
開始位置の指定やコントロールバーの非表示といったオプションがあります。
適宜指定して、コピーをクリックします。
方法B
動画内で右クリックすると、メニューが出てきます。
その中の埋め込みコードをコピーをクリックします。
③ mdファイルに貼り付け
スライドを作成しているMarkdownファイル、あるいは新規作成したMarkdownファイルの中の、動画を貼り付けたい場所で貼り付けます（Ctrl + V）。
すると、<iframeで始まるコードが貼り付けられるはずです。
④ htmlファイルにエクスポート
mdファイルの完成後、PowerPointなどにエクスポートすると思いますが、動画の再生は、htmlファイルでのみ行うことができます（2024/11現在）。
htmlファイル出力についてよくわからない場合は、次の記事を参考にしてみてください。
カスタマイズ
無事に動画を貼り付けられたところで、カスタマイズについて解説します。
幅、高さ
動画の幅や高さを調節します。
方法
貼り付けた埋め込みコード中のwidth="xxx" height="xxx"をいじるだけです。
単位をもつけられます。
ここで代表的な単位を紹介します。
| 単位 | 意味 |
| px | 画面のピクセル数 |
| （単位無指定） | |
| em | １文字あたりの大きさ |
| cm | センチ |
例
width="200px" height="5em"
コード
width="xxx" height="xxx"自動再生
動画の載っているスライドを開いたときに自動で再生するようにします。
YouTubeの仕様上、音声なしになります。
また、スマホで閲覧する際は、仕様上、自動再生されない場合があります。
方法
貼り付けた埋め込みコードのsrc=のURLの最後に続けて?autoplay=1&mute=1を追記します。
このとき、""でURLと?autoplay=1&mute=1を囲むようにしてください。
例
src="https://www.youtube.com/hogehogefugafuga?autoplay=1&mute=1"
コード
?autoplay=1&mute=1ループ再生
動画を最後まで再生したら、また自動で最初から再生するようにします。
方法
まず、動画のIDを取得します。
埋め込みコード中のsrc属性は、次のような構成になっています。src="https://www.youtube.com/embed/[動画のID]"
そこで、[動画のID]に当たる部分（かっこ[]は含みません）をコピーしておきます。
次に、その埋め込みコードのsrc="https://www.youtube.com/embed/[動画のID]の最後に続けて?loop=1&playlist=[動画のID]を追記します。
このとき、""でURLと?loop=1&playlist=[動画のID]を囲むようにしてください。
例
src="https://www.youtube.com/hogehogefugafuga?loop=1&playlist=[hogehogefugafuga]"
コード
?loop=1&playlist=[動画のID]コントロールバー（再生・一時停止ボタンや字幕、設定ボタンなどがある動画下部のバー）を非表示にしておきたい場合、同様にして&controls=0を追記してください。
なお、動画をクリックした状態で、Spaceキーを押すと再生や一時停止、Fでフルスクリーン、Cで字幕といったショートカットキーが使えるようです。
これにより、動画を広く見せることができ、また機能をショートカットキーで使うことができます。
&controls=0目的の場面からの再生
動画の再生開始の位置を変更します。
方法
これはコードを埋め込む前、YouTubeからコピーする際に設定します。
方法Aで共有ボタンをクリックして埋め込むをクリックする際に、開始位置を任意の時間に指定します。
そして、コピーをクリックすることで、開始位置を指定した埋め込みコードを取得することができます。
その後は手順通りです。
複数組み合わせカスタマイズ
以上で紹介したカスタマイズを、複数同時に設定することができます。
例えば、自動再生かつループ再生の場合は、URL?の後にキーワードを&でつなげばOKです。
src="https://www.youtube.com/hogehogefugafuga?autoplay=1&mute=1&loop=1&playlist=[hogehogefugafuga]"
まとめると、書式は次のようになります。
src="https://www.youtube.com/embed/[動画のID]?hoge&hoge&..."※hogeはautoplay=1などのキーワードが入ります。
それらを&つなぎます。
