目白の風景、40年前と見比べると

5年ほど前に、アサブロに動画を埋め込む（組み込む）方法を記しました。
YouTubeの機能を利用して、自分ではhtmlを書かずに済む方法です。
その内容を、現在のYouTubeの画面に合わせて少し改訂し、

備忘録として以下に再録します。

まず、事前にYouTubeのアカウントを取得して、
マイチャンネルに埋め込み予定の動画をアップロードしておきます。

それが済んだら、アサブロにログインして記事の「下書き」を作ります。
管理画面の「記事の作成・編集」で、「エディタで新規作成」を選びます。

普通に記事を書いて、静止画も普通にUPして行きます。

動画を除いた部分の記事作成が済んだら、
編集用原稿として、公開せずに一旦保存します。
次に、その記事を編集モードで再度開き、次のようにしてソースを見ます。

・MacのFirefoxの場合は、
Fileメニューから、「ツール」→「Web開発」→「ページのソース」と辿ります。
・WindowsのInternetExplorerであれば、
Fileメニューから、「表示」→「ソース」です。

該当ページのhtmlソースが次のように表示されるので、
そのうちの「本文」に該当する一行（かなり横長）を見つけてコピーします。

テキストエディットを開いて、新規文書に
先ほどコピーした「本文」のhtmlソースをペーストします。
こういう状態になります。

ここからは、YouTubeでの作業に戻ります。
マイチャンネルを開き「動画」をクリックして、
これまで自身でアップロードした動画一覧を表示させます。

その中で、埋め込みたい動画をクリックして表示させます。

動画の右下の「共有」をクリックすると、次の画面になりますので、
左端の「埋め込む」を選びます。

次にオプション選択の画面になります。

ここでは、「動画が終わったら関連動画を表示する」の
チェックマークを外します。そして、
右下の「コピー」をクリックすると、
『埋め込みコード』がパソコンのクリップボードにコピーされます。

またまた、ブログの本文作成作業に戻ります。
先ほどテキストエディットにペーストした「本文」の中の、
動画を埋め込みたい場所に、

YouTubeでコピーした『埋め込みコード』をペーストします。
下図の白抜き部分がそれです。

ここでは見易くなるように、事前に適宜改行を入れています。
<BR>の文字列の前後で改行する分には問題は起きなさそうです。
動画の画面サイズを調整したい場合は、埋め込みコードのうち、
width="○○○" height="○○○"の部分の数字を変えます。
上の例では、480と270にしています。
また、先ほど「動画が終わったら関連動画を表示する」のオプションを、
オフにしましたが、その設定が反映されていれば、
src=“http://www.youtube.com/embed/********?rel=0”というふうに、
“?rel=0” の文字列が入っているはずですので、確認します。

次にアサブロ管理画面に戻って、
「記事の作成・編集」で、エディタでない方の「新規作成」を選びます。
必要事項を適宜記入し、下の画像のように、
・記事本文の欄に、テキストエディットのhtmlソース全文をペーストします。
・記事の記述方式欄で、HTMLを選びます。

全て済んだら、「公開」ボタンを押せば完了です。
公開前に動画もプレビューできれば良いのですが、
残念なことに、この作成・編集画面では、「プレビュー」ボタンを押しても、
静止画のみが表示され、動画は表示されません。
正しく作成できている事を祈って、「公開」ボタンを押しましょう。

うまく行けば、最初にアサブロエディタで作った「下書き」はもう不要です。
これを削除しても、UPした画像はそのままサーバに残るので支障はありません。

もちろん、下書きを残したままでも問題ありません。