あめつくのブログ

  • このエントリーをはてなブックマークに追加

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です。

URLの入力欄が表示されますので、こちらにYouTube動画のURLを貼り付け[OK]をタップします。すると、埋め込み用のタグが生成されますので、これをコピーします。

あとは、コピーした内容をブログに埋め込めば完了です。ブログのプレビュー機能で確認すれば動画が表示されるはずです。

便利なツールを作成して下さった、ふぃーぷれさんに感謝します!ありがとうございます!!

メディア共有サイトのコンテンツを簡単に埋め込むことができるブックマークレット。 | Feelingplace

はい、ということで、「oEmbedブックマークレット・メーカー」を利用して、YouTubeの動画を簡単にブログに埋め込む方法のご紹介でした!これで、iPhoneでのブログ投稿が快適になること間違いなしです!!

広告

関連記事

コメント

  • トラックバックは利用できません。

  • コメント (4)

    • 2016年 2月 25日

    こんにちは!
    この方法でブッマークレットを登録してみたのですが、タップしても起動せず困っております、、、
    何か原因がわかればと思ってコメントさせていただいたのですが、どうでしょうか?

      • あめつく
      • 2016年 2月 25日

      こんばんは!
      上手くいきませんでしたか。困りましたね。

      ちなみに、「https」で始まるURLのページですと、ブックマークレットをタップしても起動しないと思われます。一度、「http」で始まるページを表示して試していただければと思います。

      Yahooでしたら、「http」で始まるので、Yahooのトップページかなんかを表示して試してみるといいと思います。あっ、ちなみに、Googleは「https」ですので注意が必要です。

        • 2016年 2月 26日

        わざわざ返信ありがとうございます!!!

        確認してみましたところ、
        input media URLという表示が、出てくるところまではできたのですが
        URLを入力してタップすると
        「ページを開けません。アドレスが無効です。」
        という表示が出てきてしまいます。

        ちなみに私の間違いだとしたら申し訳ないのですが、このURLというのは共有用の
        http://youtu.be/◯◯◯
        というものですよね?

          • あめつく
          • 2016年 2月 26日

          いえいえ、こちらこそ、返信ありがとうございます!

          なんとなく、もう少しで出来そうな感じがしますね。
          はい。URLは共有用のものであっています。間違いありません。

          ただ、実際に試したURLがわからないと僕の方でも確認できないので、たまたま試したURLが悪かっただけかもしれません。

          もしよかったら、こちらのURLで試してみてください。
          http://youtu.be/ji31eRUvo2U

          ちなみに、上のURLはGoogle Japanの動画です。一応、僕の方では、このURLを貼り付けて試したところ上手くいきました。

          もし、このURLで上手く起動しない場合は、もう一度登録し直した方がいいかもしれませんね。

カテゴリー