YouTubeの動画をiPhoneでブログに埋め込むなら、「oEmbedブックマークレット・メーカー」がオススメ！

今回は、YouTubeの動画を簡単にブログに埋め込むことができる、「oEmbedブックマークレット・メーカー」をご紹介します。今のところ、これ以上簡単にできる方法はないと思います。

「oEmbedブックマークレット・メーカー」とは？

oEmbedブックマークレットは、メディア共有サイトのコンテンツを簡単に埋め込むことができるツールで、以下のサイトに対応しています。

YouTube
Vimeo
Dailymotion
SlideShare
Instagram
Twitter

ここでは、このツールを利用して、YouTubeの動画をブログに埋め込む方法をご紹介します。

なお、こちらのツールはブックマークレットを利用します。ブックマークレットというのは、Safariなどのブラウザに登録して利用するプログラムのことです。プログラムという言葉が分かりづらい場合は、アプリだと思ってください。

iPhoneにインストールして利用するアプリは「iPhoneアプリ」。iPadにインストールして利用するアプリは「iPadアプリ」。同じように、ブラウザにインストールして利用するアプリが「ブックマークレットアプリ」です。
（正確には、「ブックマークレットアプリ」ではなく、「ブックマークレット」と言います。）

最初は分かりづらいかもしれませんが、利用しているうちに分かるようになると思います。

まずは、ブックマークレットの登録（インストール）

まずは、ブラウザに「ブックマークレット」を登録（インストール）します。

それでは、こちらのページを表示して登録（インストール）をはじめます。

→ oEmbedブックマークレット・メーカー

こちらのページで、ブックマークレットに登録する内容（設定）を作成していきます。細かな設定が可能ですが、初めて利用する場合は戸惑うと思います。そこで、今回は僕のオススメの設定をご紹介します。使い方になれたらカスタマイズしてみてください。

まず、「書式テンプレート」をタップして、「メディアのみ」を選択します。

「出力先」をタップして、「ポップアップ」を選択します。

続けて、動画の幅を指定します。ここは、自分のブログの横幅に合わせて指定してください。（YouTubeで埋め込みコードを取得すると幅が「560」になります。迷った場合は、これに合わせるといいと思います。僕も今は、560で利用しています。）

CSSで動画の表示サイズを変更したい場合は、「${html}」の部分の前後にタグを追加します。「${html}」の部分がYouTubeの動画を埋め込むためのタグ（iframe）に変換されます。もし分からない場合は、そのままにしておきます。（アメブロで利用する方は、ここは変更する必要はありません。幅が大きすぎる場合はアメブロ側で勝手にサイズを自動調整してくれます。）

すべての設定が終わりましたら、[Bookmarkletを生成]をタップします。

すると、Bookmarkletが生成されますので、生成された内容をすべて選択してコピーします。つづけて、[ブックマーク]ボタンをタップします。

[追加]ボタンをタップして、今表示しているページをブックマークに登録します。

それでは、今登録したページを編集して、先ほど生成したブックマークレットを登録（インストール）します。まず、[ブックマーク]ボタンをタップします。右下の[編集]ボタンをタップします。

先ほど保存したページを選択します。すると、ブックマークの編集画面に切り替わりますので、アドレス欄の内容をクリアします。

アドレス欄にコピーしておいたブックマークレットを貼り付け、[戻る]をタップします。続けて、[完了]をタップします。

[完了]をタップします。これで、ブックマークレットの登録（インストール）は完了です。

登録したブックマークレットの使い方

それでは、登録したブックマークレットを利用して、YouTubeの動画をブログに埋め込みましょう！

まず、事前にブログに埋め込みたいYouTubeの動画のURLをコピーしておいてください。

埋め込みたいYouTube動画のURLをコピーしましたら[ブックマーク]ボタンをタップし、登録したブックマークレットを選択します。ちなみに、このとき表示しているページはなんでも構いません（表示しているページのURLが、「http」で始まるページであればどのページでも平気ですが、「https」で始まるページでは機能しないかもしれません）。何かしらのページが表示されていればOKです。