【YouTube】動画をブログの投稿記事に簡単に貼り付ける方法(Blogger)

こんにちは、SAKURAです🌸

YouTuberのハシクレですから、どうしても自分のUPした動画をPRしたい訳です。試行錯誤の上、ある程度納得できる配置がなりましたので、その方法をお知らせします。

配置場所ですが二通り考えられます。投稿記事に埋め込む方法とサイドバーに埋め込む方法です。

投稿記事にYouTubeの動画を挿入する


一つ目は、誰でもできる簡単な方法です。
ツールバーの「動画を挿入」を選んぶ。
  1. 「動画を追加画面」ウインドウが開くので、「YouTubeマイ動画」タブを押す。
  2. 目的の動画を一覧から選んでクリックし、「選択」ボタンを押す。
これだけで完成です。動画にしたら、数十秒で終わっちゃった。(^_^;)

埋め込みコードを取得してYouTube動画を埋め込



埋め込みの基本的な流れは以下のとおりです。
  1. 埋め込みたいYouTube動画のメージを開きます。
  2. 「共有」ボタンを押す。
  3. 「共有」ウインドウの「埋め込み」ボタンを押す。
  4. スクロールして「埋め込みオプション」の「動画が終わったら関連動画を表示する」のチェックを外す。
  5. 「プライバシー強化モードを有効にする」にチェックを入れる。
  6. 「コピー」ボタンを押す。
  7. ブログの記事の作成画面にもどり、HTMLモードにする。
  8. 挿入したい箇所にカーソルを持っていき、貼り付ける。(シュートカットキー、Ctrl+VでもOK)
  9. 作成モードに戻す。  
いろいろカスタマイズもできます。ノーマル設定では、動画終了後に関連動画が表示されますが、他人の動画も表示されます。せっかくのお客さんを取られてしまいます。ですので、オプションの「動画が終わったら関連動画を表示する」を無効にします。

5.で「プライバシー強化モードを有効にする」にチェックを入れる。にしていますが、別に入れなくてもいいようです。再生するまでに、Cookieを保存させるか、させないからしいです。ただ、このブログの場合、プライバシーポリシーを掲載してる関係で、一応入れた設定にしています。YouTubeのことは書いてないですからね。

その他の設定として、埋め込みコードを修正したり、追加したりすることでカスタマイズできます。

参考にさせていただいたブログ
ちもろぐ
Youtubeの埋め込みを使いこなす、20個のテクニックまとめ
http://chimolog.co/2017/06/blog-youtube-embed-20.html

以下、単なるコピペです。
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/1V2ceMka7UY?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

動画の大きさを変えるには?

width="560" height="315"の部分です。
この数字を変更します。width="横" height="縦" です。アスペクト比16:9が多いので、この比率にしたほうがいいのですが、計算するか、表示して調整するかです。

計算が面倒な場合は、width="100%"(表示できる画面の100%という意味、画面の8割にしたければ80%)とすると自動調整されます。ただし、横のみです。縦にするととんでもなく長くなります。



今はサムネイルなので画面にいい感じで収まっているように見えますが、PCで再生させてみると両サイドに黒いスペースができています。これは高さが足らないからです。
スマホ(縦)の場合は、逆に上下に黒いスペースができます。
彼方を立てれば此方が立たず。PCとスマホどちらを優先させるかにもよりますが、どこかで妥協しなければなりません。(両方立たせる方法を次回説明します)

それ以外のカスタマイズですが、私が好んで使いうが、翻訳を表示させるです。
cc_load_policy=1
を入れます。上の動画も入れています。日本語とか英語とか言語を指定することもできますが、それはしていません。できるだけ英語の字幕も入れたいと思っています。

入れる位置ですが、

<iframe width="100%" height="315" src="https://www.youtube-nocookie.com/embed/TZw_dHytM5s?cc_load_policy=1&rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

? と rel の間ですね。そして&をrelの前に追加する。
もともと、?rel(関連動画非表示)を付けてましたので、間に入れて&を追加しましたが、これは複数のパラメータを設定する場合です。1個めが?、2個目以降は&を頭につけます。

これら以外にも自動再生をさせようと思ったのですが、YouTubeの数字にはカウントされず、さらに、音が突然出るとビックリしてしまいます。音量を制御する方法もありますが、スマホでは無効とのこと。無音の動画ならしてもいいかなという程度です。

いろいろとパラメーターを追加することになりますが、私のような初心者の方は作成モードとHTMLモードの切り替えを1回で済ますように、最初から全部追加したほうがいいと思います。一つ一つ確認しながら、追加するのも手ですが、Bloggerさんがお利口だから、コードを書き換えてしまうんです。すると、次のパラメーターをどこに入れてよいのか迷ってしまいます。

更にいろいろとカスタマイズできますので、興味のある人はリンクのページを参考にされてはと思います。

今回説明したの二つの方法ですが、時と場合のより使い分けるといいと思います。
小さい動画は見にくいですよね。人によっては、YouTubeの動画メージまで来てくれるかもしれません。動画投稿しました程度なら、このほうが良いかもしれません。

今回のように補助的に動画を使う場合はブログにとどまってほしいので、できるだけ大きくしたほうがいいと思います。場合によっては、コントロールメニューを表示させないパラメーターを追加するとか……

あくまでも想像の範囲です。検証はこれからです。(検証ができるほど見てくれる人いませんが……)

ちょっと長くなりましたので、続きは次回にしますね。お楽しみに。

(*^▽^*)

コメント

このブログの人気の投稿

【Blogger】任意の投稿をTOPに固定する方法

アナリティクス 知らず知らずのうちに規約違反をしていました

【YouTube】ゲーム動画を配信するためのソフト(現在使用しているソフト)