知ッタメ!

くらしや仕事などの知ったら思わず試したくなることや知っていると為になることを記録しているブログです。どうぞご覧くださいませ。

ユーチューブの動画をブログに貼りつける方法【最新版】

スポンサーリンク

2018年7月23日公開
この記事は2018年7月23日に執筆したものです。

f:id:syuhei-asahina:20180815010908j:plain

「ユーチューブの動画をブログに貼りつける方法を知りたい」
「ユーチューブの動画の貼りつけ方が変更されて方法がわからない」

こちらの記事はそのようなあなたに対して書いています。

私は中年のおっさんです。
ハンドルネームは朝比奈宗平。
――朝比奈は久しぶりにユーチューブの動画をブログに貼りつけようとしました。

すると、ユーチューブの動画の貼りつけ方が変更されていて、その方法がわかりません。

試行錯誤すること小一時間。

やっとユーチューブの動画をブログに貼りつける方法がわかりました。

もしかすると、あなたも朝比奈のようにユーチューブの動画をブログに貼りつける方法がわからず、困っていらっしゃるのではないでしょうか?

そのような訳で今回は「ユーチューブの動画をブログに貼りつける方法の最新版」を紹介します!
今回の記事が、あなたの素敵な恋愛の一助になれば幸いです。

今回の記事でわかること

今回の記事を読むと下記のことがわかります。

  1. ユーチューブの動画をブログに貼りつける方法の最新版
  2. ユーチューブの動画をブログに貼りつける手順
  3. ユーチューブの動画をブログに貼りつける方法【最新版】が簡単であること

こんな人にオススメ

今回の記事は、下記のようなことで悩んでいらっしゃるあなたにオススメです。

  1. 作業時間を短縮したい
  2. ユーチューブの動画の貼りつけ方が変更されて方法がわからない
  3. ユーチューブの動画をブログに貼りつける方法を知りたい
  4. どこを探しても最新のユーチューブの動画をブログに貼りつける方法がなくて困っている

 

  1. ユーチューブの動画をブログに貼りつける方法を知りたいすべての方にオススメ

ユーチューブの動画を貼りつける手順

ユーチューブの動画をブログに貼りつける手順は、下記のとおりです。

なお、埋め込みコードをHTML編集画面に貼りつける際、必ずユーチューブの動画のサイズを変更してください。

なぜなら、ユーチューブの動画の幅とブログ記事の幅はちがうからです。

双方の幅がちがうので、サイズ変更しないとユーチューブの動画がブログ記事の幅を飛び出してしまいます。

そのせいで、アクセス数や滞在時間が少なくなるなんて嫌ですよね?

ブログ記事を見栄え良くするためにも必ずユーチューブの動画のサイズを変更しましょう。

  1. ユーチューブにアクセスします。
  2. 次にブログに貼りつけたい動画を検索してください。
  3. その動画を再生。
  4. 動画の再生が始まったら、マウスでカーソルを動画に重ねてください。
  5. 続いて、マウスを右クリックします。
  6. するとウィンドウが表示されるので、その中の「埋め込みコードをコピー」を選んでください。
  7. ご自身のブログのHTML編集の好きなところに埋め込みコードをはりつけます。
  8. 動画のサイズを変更すれば、作業終了です。

 

  1. a
  2. c
  3. d
  1. ユーチューブの動画を貼りつけるのは以前よりも簡単になっている
  2. 動画のサイズ変更は必須

ユーチューブ動画のサイズ変更のしかた

こちらでは、ユーチューブ動画のサイズ変更のしかたを説明します。
下記はユーチューブの動画のURLです。
結論から言いますと、中央あたりにある「width="966"height="543"」というコードを変更すればユーチューブ動画のサイズを変えることができます。

<p><iframe src="ユーチューブの動画のURL" width="966" height="543" frameborder="0" allowfullscreen=""></iframe></p>

動画のサイズを変更する前に

ユーチューブ動画のサイズを変更する前に知っておいてほしいことが3つあります。

1つめはユーチューブ動画は「16:9」になっていることで、2つめは動画の幅を変更するのであれば動画の高さも変更しなければならないということ、最後は動画をレスポンシブデザインで使う場合には適切なコードが必要であることです。

これらのことを理解したうえで、ユーチューブ動画のサイズ変更を行ってください。

 

動画の幅をブログ記事の幅と同じにする場合

ユーチューブ動画の幅をブログ記事の幅と同じにすれば、動画の幅は記事幅に変わります。

ただし記事の高さは変わりません。

そのため、動画の高さを変更してください。
動画の高さの変更は下記のとおりです。

なお、この方法はレスポンシブ対応ではありません。
そのため、PCとスマートフォンのどちらかに動画のサイズを合わせてください。

  1. 動画の幅の数字を16で割ります。
  2. その答えに9をかけてください。
    これが動画の高さです。
  3. 埋め込みコードの「height="動画の高さ"」に数字を変更してください。
  4. 動画の高さを変更したら作業終了です。

動画の幅を100%にする場合

「width="966"」を「width="100%"」にしてもユーチューブ動画の幅をブログ記事の幅と同じにすることができます。

もちろん、ユーチューブ動画の高さは変わりません。

先述の手順にならって動画の高さを変更してください。

高さを指定しない場合

埋め込みコードの「height="動画の高さ"」を削除すると、動画の高さを指定せずに済みます。

この場合、PCではユーチューブ動画の形状は横に細長い帯状になりますが、動作は問題ありません。

スマートフォンでの動画の形状は違和感なく、きちんと動画を最江成することができます。

ユーチューブの動画をレスポンシブ対応にする

ユーチューブの動画をレスポンシブ対応にしたい場合は、HTMLとCSSコードを使って行います。

Youtube 動画の埋め込みをCSSでレスポンシブ対応する方法 - HAM MEDIA MEMO」で詳しく説明されていますので、そちらを参考にして行ってください。 

まとめ

ユーチューブの動画を貼りつける方法は、以前のものよりも簡単になりました。

そのため、ブログの執筆時間を短縮できるので、その時間をあなたの好きなことをする時間にあてることができます。

何よりも良いことは「ユーチューブの動画を貼りつける方法がわからなくて困る」というストレスから解放されることかもしれませんね。

以上で「ユーチューブの動画をブログに貼りつける方法【最新版】」を終わります。

✔ 今回の記事のポイント
  1. ブログの執筆時間を短縮できるので、その時間をあなたの好きなことをする時間にあてることができる
  2. 「ユーチューブの動画を貼りつける方法がわからなくて困る」というストレスから解放される
▼ 押さえておきたい関連知識

関連記事

当ブログでは下記のような記事もございます。
よかったら、お読みくださいませ。

syuhei-asahina.hatenablog.com

syuhei-asahina.hatenablog.com

syuhei-asahina.hatenablog.com

syuhei-asahina.hatenablog.com