その他の埋め込みの方法

mitsuamiishinage_TP_V.jpg
埋め込み関係で紹介していなかったもので、思いついたのが「Facebookの埋め込み」、「YouTubeの埋め込み」、「Googleマップの埋め込み」ですので、今回はそれらを一気に紹介します。


Facebookの埋め込み

Facebookの投稿の右上の「・・・」アイコンをクリックして、「</>埋め込み」を選べば「埋め込みコード」をコピーできる画面になります。

下の画面は「投稿全文を含める」にチェックを入れたものです。
チェックを外すと「何気ない日常が一番のしあわせ☀️」文や「いいね!」や「コメントする」アイコンなどがコピーされない画面になります。

今までもこれからもそばにいるよ💖 仲良しニャンコと柴犬の暖かな日々✨

何気ない日常が一番のしあわせ☀️

PECO[ペコ]さんの投稿 2020年2月3日月曜日


それにしても、本当にこのネコちゃんとワンちゃんは仲がいいですね。
編集も上手いのでしょうが・・・



YouTubeの埋め込み・普通版

画像のすぐ下の「↷共有」文字をクリックすると、色々なアイコンが出てきますが左側の「埋め込み」を選択します。
すると右下に「コピー」の文字がありますのでクリックすると「埋め込みコード」がコピーされます。

今回は、The Beatles のCover曲Drive My Carを双子のグループ「 MonaLisa Twins 」(モナ、リサ)さんが歌っている動画を選んでみました。

この動画では、特別な設定をしていませんので、最初から最後までを再生します。


Drive My Car - MonaLisa Twins (The Beatles Cover) 全2:47


YouTubeの埋め込み・時間指定版

短い動画なら上で紹介した方法でOKですが、時間が長い動画の場合は、例えば「映画、コンサート、講演など」の一部分だけを紹介したいときには、とても困ります。

「開始位置」にチェックを入れ時間(秒)で指定することは既定の画面上で出来るのですが、
残念なことに終了時間を指定する画面はどこにもありません。
終了時間が指定できないのです。

でも、終了時間を指定する方法があります。
埋め込みコピーしたコードにほんの少しだけ「追加のコード」を挿入します。

コピーしたコード中の、
「src="」の末尾に「?start=再生開始秒数&end=停止する秒数」を挿入すると、
開始と終了位置の指定が出来るのです。


こうすることで、「ライブコンサートの7曲目だけ」、「映画のあのシーンだけ」、「講演のあの話だけ」を紹介したいときに、その開始・終了時間をメモっておけば、その部分だけをブログで紹介することを実現できます。

例えば上の動画の例では全体が2分47秒なのですが、開始が10秒で終了が1分30秒(90秒)の位置にしようと思った場合は、「src="~/qKRle7mgadk」に続けて「?start=10&end=90」を挿入します。


すぐ上の動画の埋め込みソースは、次のようになっています。

YouTubeのDrive My Car - MonaLisa Twins (The Beatles Cover)の埋め込みソース
<p class="marquee-anima">
<span>
<iframe width="560" height="315" src="https://www.youtube.com/embed/qKRle7mgadk" 
frameborder="0" allow="accelerometer; autoplay; encrypted-media; 
gyroscope; picture-in-picture" allowfullscreen></iframe>
</span>
</p>

このソースの3行目の「src」の末尾に「?start=10&end=90」を挿入します。

すると、コードは次のようになります。

Drive My Car - MonaLisa Twins (The Beatles Cover)の埋め込みソース・開始/終了指定あり
<p class="marquee-anima">
<span>
<iframe width="560" height="315" src="https://www.youtube.com/embed/qKRle7mgadk
?start=10&end=90" frameborder="0" allow="accelerometer; autoplay;
 encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</span>
</p>
4行目の冒頭のオレンジ色の部分(?start=10&end=90)を挿入しました。


そしてその画面は、10秒から開始して1分30秒でピッタリ終了します。

Drive My Car - MonaLisa Twins (The Beatles Cover) 全2:47 のうち 0:10 - 1:30 の部分

なお、この二人は、ビートルズと同じリバプール出身だそうで、ビートルズのカバー曲が多いです。



Googleマップの埋め込み

埋め込みたい地図を開き、地図の左上の「メニュー」(横三本線)の右の検索欄に埋め込みたい場所の「住所・電話番号・施設名・店名」のいずれかを入力すると地図上に赤いピンが刺さります。
地図上に目的の施設名があれば、それをクリックしてもOKです。

すると、「共有」→「地図を埋め込む」で埋め込みコードが表示され、「HTMLをコピー」できます。

このときに、大・中・小の漢字部分をクリックして地図サイズを選択できます。
ブログでは、「小」か「中」で十分な気がします。
必要なときは地図を拡大表示できます。

「小」の「横400px 縦300px」の場合

ブログ気持玉

クリックして気持ちを伝えよう!

ログインしてクリックすれば、自分のブログへのリンクが付きます。

→ログインへ

なるほど(納得、参考になった、ヘー)
驚いた
面白い
ナイス
ガッツ(がんばれ!)
かわいい

気持玉数 : 86

なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー)
ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス
ガッツ(がんばれ!)
かわいい かわいい かわいい

この記事へのコメント

  • tor

    YouTubeの埋め込みされている方
    見かけますが
    なるほどですね。
    地図の埋め込みは半年前位にマスターしました。
    ウエブリブログでは簡単にできていたので
    しばらく悩みました。
    2020年02月11日 19:25
  • わけい

    torさんへ
    コメントどうもありがとうございます。
    地図のはtorさんのページ見て思い出しました。
    YouTubeは埋め込みがあっても、時間指定まであるのはごく少ないので、この方法をメモっておくとどこかで参考になるのではと、PRしておきます。
    2020年02月11日 20:45
  • miyo

    こんばんは~
    みなさんYouTube上手にしてますね!
    見るのは良くありますが、自分のサイトには難しそうで乗せたことありませんでした。
    分かりやすい解説して頂き、なるほどと思いました!♪

    お伝えしたいのですが、
    私の今回雪山登山が途中不具合でUPしてしまって続きがありました。
    良かったらご覧くださいませ!
    いつも気持ち玉有難うございます!(^^♪


    2020年02月12日 20:30
  • わけい

    miyoさんへ
    コメントどうもありがとうございます。
    先程、「ランクルの大冒険Ⅱ」を訪問してきました。
    今年はスキー場も雪不足の話をよく聞きますが(どこの地域かは分かりませんが、兵庫県の近く?)赤谷山は雪が沢山ありそうで、スキーを満喫出来てよかったですね。

    私もYouTubeなどの埋め込みは、今までは使ったことがなかったのですが、これを契機にこれからは有効に使ってみたいと思っています。(リンクで対応していました。)

    2020年02月13日 10:49
  • y&m

    あっ とっても参考になります。
    ありがとうございました。(^^♪
    2020年02月13日 12:29
  • わけい

    y&mさんへ
    コメントどうもありがとうございます。
    少しでも参考になればとても嬉しいです。
    2020年02月13日 23:43