動画及び地図を投稿に埋め込む方法

投稿に動画・地図を埋め込むことが出来るようになりました!

対応する動画は、YouTubedailymotionVimeo、等です。
動画を当サイトにアップロードすることはできません。
サイトオープン当初から動画の埋め込みが出来ないものか試行錯誤していたのですが、埋め込みタグを入れると自動でフィルターがかかって削除されてしまう仕様になっています。これを何とか回避して動画の埋め込みが出来るようにしました。

YouTube の動画を埋め込む場合

(PCサイトでの説明になります)

  1. YouTubeにアクセスします。埋め込みたい動画を表示して、をクリックします。
  2. 「共有」のフローティングウィンドウ右下のをクリックします。
  3. 「Embed Video」のフローティングウィンドウ右下のをクリックします。
    オプションは適当で良いですが、「動画が終わったら関連動画を表示する。」はチェックを外した方が良いかも知れません(投稿者の意図した内容から離れ、別な動画を見てしまう可能性を防ぐため)。
    コピーすると上部に表示されている iframeタグのコードがクリップボードに保存されます。
  4. ThanQサイトの投稿編集画面を表示し、ツールバーの[Source]ボタンをクリックします。
  5. ソースモードは、ツールバーを使用する編集画面とは違って、HTMLタグを直接打ち込んで編集するモードになります。ここに CTRL+V(ペースト) でiframeタグのコードを貼り付けます。貼り付ける箇所は表示したい場所になりますが、どこでも良いというわけではなく、<> で囲まれていない箇所に貼り付けてください。そうでないと正常に表示されなくなります。実際、元の編集画面で色々書いてるとソースモードではタグも混在して表示されるため、どこに埋め込んだら良いか分からなくなります。なので、あらかじめ「ここに動画」等と書いておくと良いかも知れません。ソースモードにしたら「ここに動画」の部分を探せば良いので。
    もう一度[Source]ボタンを押してソースモードから抜けます。
  6. 元の編集画面に戻って編集が終わったら[質問する]、[回答する]、[変更を保存]等のボタンを押して、編集モードから抜けてください。実際に動画が正常に表示・再生できることを確認して下さい。
《結果》

スマホの場合

スマホではPCサイトでもアプリでも iframeタグのコードを取得できないようです。なので、まずリンクを取得し、その中の動画ID のみを抜き出します。動画ID は、v= の後に続く11桁の半角英数字の文字列です。YouTubeアプリでリンクを取得した場合は、https://youtu.be/********** となり、最後の *********** の部分が動画ID となります。その後、以下のタグ・テンプレートをコピーして*********** の部分を動画IDに置き換えてください。
タグ・テンプレートの***********の部分を動画IDに書き換えたら、タグ全体をコピーして編集画面のソースモードで貼り付けて下さい(上記4.~5.の手順)。

dailymotion の動画を埋め込む場合

(PCサイトでの説明になります)

  1. dailymotionにアクセスします。埋め込みたい動画を表示して、をクリックします。
  2. 「動画を共有する」のフローティングウィンドウ一番下のをクリックします。
    自動再生オプションは OFF のままが良いでしょう(閲覧者の意思と関係なく勝手に再生されるのは好ましくないので)。
    iframeタグのコードを選択し、CTRL+C でコピーします。
  3. ThanQサイトの投稿編集画面を表示し、ツールバーの[Source]ボタンをクリックします。
  4. ソースモードは、ツールバーを使用する編集画面とは違って、HTMLタグを直接打ち込んで編集するモードになります。ここに CTRL+V(ペースト) でiframeタグのコードを貼り付けます。貼り付ける箇所は表示したい場所になりますが、どこでも良いというわけではなく、<> で囲まれていない箇所に貼り付けてください。そうでないと正常に表示されなくなります。実際、元の編集画面で色々書いてるとソースモードではタグも混在して表示されるため、どこに埋め込んだら良いか分からなくなります。なので、あらかじめ「ここに動画」等と書いておくと良いかも知れません。ソースモードにしたら「ここに動画」の部分を探せば良いので。
    もう一度[Source]ボタンを押してソースモードから抜けます。
  5. 元の編集画面に戻って編集が終わったら[質問する]、[回答する]、[変更を保存]等のボタンを押して、編集モードから抜けてください。実際に動画が正常に表示・再生できることを確認して下さい。
《結果》

スマホの場合

PCサイトと同じ方法で iframeタグのコードを取得できます。アプリを使った場合は、リンクのみの取得となりますので、YouTubeアプリと同じ要領でリンクを取得した後、動画IDのみを抜き出します。
dailymotionの動画IDは、リンクの最後の7桁が動画IDとなります。
以下のタグ・テンプレートをコピーして ******* の部分を動画IDに置き換えてください。
タグ・テンプレートの ******* の部分を動画IDに書き換えたら、タグ全体をコピーして編集画面のソースモードで貼り付けて下さい(上記4.~5.の手順)。

注意事項

■沢山の動画を埋め込むとページの読み込みが遅くなります!1つの投稿で埋め込む動画は多くても3つ程度にして下さい。
■埋め込む動画の内容は公序良俗に反してはいけません。各自、責任と善良なる意識をもって掲載するようお願いします。公序良俗に反した動画を発見した場合は、警告なしに投稿を削除いたします。また、目に余る動画の掲載はアカウント停止の対象となります。

Google マップの地図を埋め込む場合

(PCサイトでの説明になります)

  1. Google マップにアクセスします。埋め込みたい場所の地図を表示して、をクリックします。
  2. メニューのをクリックします。
  3. 「地図を埋め込む」タブをクリック。地図のサイズを決めて、選択されている iframeタグのコードを CTRL+C でコピーします。

    地図のサイズは大きすぎないようにして下さい。「中」程度で良いと思います。カスタムサイズでサイズを指定する場合でも幅640px、高さ400px程度でお願いします。
  4. ThanQサイトの投稿編集画面を表示し、ツールバーの[Source]ボタンをクリックします。
  5. ソースモードは、ツールバーを使用する編集画面とは違って、HTMLタグを直接打ち込んで編集するモードになります。ここに CTRL+V(ペースト) でiframeタグのコードを貼り付けます。貼り付ける箇所は表示したい場所になりますが、どこでも良いというわけではなく、<> で囲まれていない箇所に貼り付けてください。そうでないと正常に表示されなくなります。実際、元の編集画面で色々書いてるとソースモードではタグも混在して表示されるため、どこに埋め込んだら良いか分からなくなります。なので、あらかじめ「ここに地図」等と書いておくと良いかも知れません。ソースモードにしたら「ここに地図」の部分を探せば良いので。
    もう一度[Source]ボタンを押してソースモードから抜けます。
  6. 元の編集画面に戻って編集が終わったら[質問する]、[回答する]、[変更を保存]等のボタンを押して、編集モードから抜けてください。実際に地図が正常に表示してることを確認して下さい。
《結果》

■同じ要領で、Google ストリートビューを埋め込むこともできます。
■Yahoo! 地図の地図を埋め込むことはできません。
「ThanQ」にようこそ。
ここではコミュニティメンバーに質問したり、回答を得ることができます。

691 質問

915 回答

600 コメント

2,337 ユーザー

...