[ Youtube の動画をウェブページに埋め込む ]

参考リンク
最近のニュースが・・・ - Youtube 動画

上のリンクの動画で対話型 AI ロボットが話している内容は、ある意味で、現在の人類の考えや思想、理性、心理、願望などを反映しているとも言えます。

03_ウェブページに動画を埋め込む - ローカル環境で再生可能

Youtube の再生リストの動画をウェブページで再生できるようにする方法です。再生リストではない単独の動画の場合も、基本的に手順は同じです。
Windows に付属のメモ帳などのテキストエディタを起動して、以下のコードをコピーして貼り付けます。Windows 10 の場合、メモ帳は、画面下端のタスクバーの左端の検索欄にメモ帳と入力して [Enter] キーを押すと起動できます。
このようなコードを HTML コードと言います。

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <title>自分専用動画</title>
  <style>
    body { width : 650px; margin: auto;}
  </style>
</head>
<body>
<br>
<br>
  自分専用の動画<br>
<br>
  ここに [埋め込みコードをコピー] でコピーしたコードを貼り付ける
<br>
<br>
<br>
</body>
</html>

以下のリンクをクリックします。今回はこのリンクの Youtube のページに掲載されている再生リストを埋め込むことにします。

科学の遺産と未来 - YouTube

表示されている動画にマウスカーソルを移動すると、下図のように [すべて再生] という表示になる動画があります。それをクリックして動画を再生します。
動画が再生したら停止します。停止しなくても操作はできますが、短い動画だと、操作している間に終了してしまう可能性があります。

図3
再生リストの動画

クリックして動画を再生
再生したら停止

再生動画の上でマウスの右ボタンをクリックします。現れたメニューから [埋め込みコードをコピー] を選択します。

図4
マウスの右ボタンをクリック

[埋め込みコードをコピー] を選択

コピーしたコードを、上に示したコードに貼り付けます。
貼り付けたコードは 1 行だけです。メモ帳はデフォルトで右端で折り返し表示するようになっています。[書式] [右端で折り返す] を選択すると 1 行表示になります。

貼り付けたコードの先頭部分は以下のようになっています。この width と height の値を修正します。Youtube では、動画の表示サイズは 16 : 9 (1.778：1 ) となっています。今回は描画幅を 650 ピクセルとしているので、それに合わせます。

修正したら適当なフォルダに、名前を付けて保存します。拡張子は html とします。例えば youtube_video.html という名前で保存します。保存したら、保存先のフォルダをエクスプローラで開いて、保存したファイルをダブルクリックします。ウェブブラウザが起動して、あるいは新しいタブにウェブページが表示されて、動画が再生できるようになります。
このようにして保存したファイルを「HTML ファイル」と言います。

エクスプローラは、[Win] + [E] のキー操作で起動できます。

[備考]
上記の方法でウェブページに埋め込んだ動画を再生する場合、再生可能な動画は、再生リストにある動画だけです。Youtube のサイトで [すべて再生] で再生した場合は、再生リストにはない動画が再生されることがあります。

04_ウェブページで使用する HTML コードの意味

今回使用した HTML コードの説明です。HTML では、このような < > の部分をタグ (tag) と言います。つまり、この表は、タグの機能についての説明です。

コード (タグ)	意味
<!DOCTYPE html> </thml>	<!DOCTYPE html> は HTML ファイルを意味する </html> は HTML コード最後の意味 HTML コードは <!DOCTYPE html> と </html> の間に書く
<head> </head>	<head> と </head> の間はヘッダ部テキストのスタイルなどの設定部分
<meta charset="utf-8">	文字の表示に使用する文字符号化方式の指定 utf-8 は、ISO（国際標準化機構)、IEC（国際電気標準会議）が制定している文字号化方式
<title> </title>	<title> と </title> の間は、タブに表示するテキスト
<style> body { width : 650px; margin:auto;} </style>	テキストなどの描画領域を左右中央にして、その幅を 650 ピクセルにする設定この設定がない場合、描画領域はラウザの幅
<body> </body>	ブラウザに表示するテキストなどの HTML コードは <body> と </body> の間に書く
<br>	改行表示する文字 (テキスト) がなければ空白行

HTML では、半角のスペースは 1 文字だけが有効となります。2 つ目以降の半角のスペースは無視されます。また、タブ文字も無視されます。

<!DOCTYPE html> の !DOCTYPE はなくても、今回は問題ありません。ただし、HTML コードの内容によってはこの有無によってページの描画内状態が異なることがあります。
印刷文書では、一般的に 1 行が 40 ～ 45 文字が読みやすいとされてまいます。今回の width="650" は、ほぼその文字数となる幅です。
前項のコードでは、ページの上下に空白行用の <br> を記述しています。これは、ワードなどで文書を作成する時の上下の余白に相当します。

参考リンク
[文字符号化方式・文字コード・コードページ・コードポイント]

05_再生リストの特定の動画だけをウェブページに埋め込む

再生リストの特定の動画だけをウェブページに埋め込むことができます。
目的の動画を再生したら停止して、マウスの右ボタンをクリックします。現れたメニューから [埋め込みコードをコピー] を選択します。それを HTML コードに貼り付けます。
貼り付けたら width と height の値を修正します。

図5
マウスの右ボタンをクリック

[埋め込みコードをコピー] を選択

以下は、[科学の遺産と未来] の再生リストの特定の動画の埋め込みコードの一部です。embed/ の右側の赤い下線の部分は「ビデオ ID」という、この動画の ID です。list= の右側の、PL から始まる値は「再生リスト ID」と呼ばれていいる値です。この「再生リスト ID」の部分を削除して、?rel=0 を追加します。? はパラメータの意味です。

"https://www.youtube.com/embed/gaySSoLoWZI?list=PLHm9r66qpOYrzPu9f9-b0i2vKUOTFFDn7"

↓ 以下に変更(再生リスト ID を削除してビデオ ID だけにする)

"https://www.youtube.com/embed/gaySSoLoWZI?rel=0"

rel は、動画の再生終了時のサムネイルの指定です。rel=0 とすると、再生動画と同じチャンネルの動画のサムネイルを表示します。

動画の開始位置と終了位置も設定できます。start と end パラメータで秒数指定します。下のコード場合は、動画の先頭から 189 秒の位置から再生を開始し、260 秒の位置で終了します。結果、71 秒間だけ動画を再生します。パラメータは ? で開始し、2 番目以降は & で区切ります。

※ 開始位置が有効なのは、最初の 1 回だけのようです。
※ 再度指定通りに再生するには [F5] でページを再読み込みします。

"https://www.youtube.com/embed/icLSyyobVPA?start=189&end=260&rel=0"

下のボタンをクリックすると作成した HTML コードを閲覧できます。表示したコードは [Ctrl] + [A], [Ctrl] + [C] のキー操作でコピーできます。HTML コードは、ウェブページとして表示した後、[Ctrl] + [U] のキー操作 (別タブ表示) でも確認できます。
このコードをコピーしてメモ帳に貼り付けて保存した後、ウェブブラウザで開いて表示すれば、動画の再生動作を確認できます。

テキストの表示は、筆者が多少手を加えています。埋め込みコードの allow= 以降はボタン類の設定オプションですが、Youtube の仕様変更によって現在は機能しないオプションがあります。

06_自分専用の再生リストを作成する方法

例えば、以下の Youtube の動画を参考にしてください。