今更聞けない！？ホームページにYouTube動画を貼り付ける方法！

今日は、「ホームページにYouTube動画をアップ（貼り付ける）する方法」について、ご紹介したいと思います。

普段からブログ運営などWEB運用をされている人からすると、なぜ今更この話題？となるかもしれませんが、専門的に対応している方以外一般的にはまだまだ認知されていないようなので、取り上げておこうと思います。

YouTube動画をホームページにアップ（貼り付ける）する方法（導入編）
YouTubeをホームページにアップする方法（応用編）
1. PCサイト、スマホサイト両方のサイズに合わせて表示させる。
2. 関連道はを再生させないようにする

YouTube動画をホームページにアップ（貼り付ける）する方法（導入編）

近年、
動画を活用した「企業イメージの刷り込み」や、「他社との差別化」を図る手法が主流となってきているWEB運用。しかしながら、まだまだ取り組んでいる会社も少ないのも事実。
その一つの要因は、「新しいことに取り込む勇気がない」「時間がない」など。

確かに動画を撮影することは非常に難しく、魅力のない動画でなければ逆にアップしない方がマシですが、企業は動画自体所有しているケースが多く、「YouTubeにありますよ」という声をよく伺います。

しかし、そういう会社ほど、ホームページにその情報がなく、良くてYouTubeのリンクを貼っている程度。なぜホームページに載せないのかを聞いても、「難しいじゃないですかぁ」っと。

これ間違いです。難しくありません。
５分あれば十分すぎるくらいの作業です。

筆者自身パソコンが苦手だと言う企業担当者に対し、電話で１０分ほど説明するだけで自分で出来るようにしてきましたから。

YouTube動画をホームページにアップ（貼り付ける）するとは？

上図は、やましょうブログで掲載した、ゲーム紹介記事のスクリーンショットです。
ご覧の通り、YouTubeの動画はホームページ内に貼り付けられています。

これが、YouTube動画をホームページに貼り付けるということです。
設定は非常に簡単で、慣れてくると設置は１，２分程度でできるようになります。

では実際の方法を紹介していきます。

YouTubeを利用するメリット

WEB運用に際し動画活用の話を良くしますが、その際に「動画を上げるなら自社サイトに上げればいいんじゃない！？」と、言われることが多々あります。

もちろんこれは非常に良いことですが、写真の何倍も容量の大きい動画を保存するために、ホームページで利用しているWEBサーバーを強化しなければいけなくなり、コストもかかってくることを覚悟する必要があります。このコストは、動画や写真を上げ続ける以上、どんどん膨れ上がっていくと考えておいてください。

しかし、YouTubeはその容量を気にしなくて良いのが利点です。どんだけアップしても無料。

更には、YouTubeにアップしておけばYouTubeを閲覧している人の目に留まりやすくなるため、より多くの方の目にふれる可能性が高くなります。

また、YouTubeは日本の検索エンジンを牛耳ているGoogle社が運営しており、検索結果に動画枠でも紹介されやすくなる可能性も出てきます。

YouTubeをうまく活用すれば、コストも抑えられ、露出も増やすことも可能になるということです。
※一般に公開してはいけない社外秘の内容や、営業ツールなど他社に知られたくないものは、当然ですがアップしないでください。

YouTube動画をホームページに貼り付ける方法（導入説明）

設置方法は以下の手順通り進むだけで完了です。
非常に親切で簡単♬

①YouTubeを開く

②動画右下の「共有」をクリック

③「埋め込み」をクリック

④表示されたソースコードをコピーする

上図のようにホームページに貼り付けるためのソースコードを発行してくれますので、こちらをコピーします。

後は、この情報を正しい形で貼り付けをすれば完了です。
※ソースコードの貼り付け方はホームページの仕様に異なりますので、制作会社に確認するか、作成しているホームページがCMS（WordPressやMovable Typeなど）の場合はその仕様を確認して、その使用に合わせて設置してください。

【発行された通常のソースコード】
<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/qeJK3y7_ngQ” frameborder=”0″ allow=”accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe>

＜補足＞
以下の数値を変更することで、横幅や縦幅を任意で変更することが可能です。

width=”560“　←横幅
height=”315“　←縦幅

実際に貼ってみました

YouTubeをホームページにアップする方法（応用編）

PCサイト、スマホサイト両方のサイズに合わせて表示させる。

閲覧需要の比率がスマホ主流となってきている昨今、スマホ表示を意識しないわけにはいけません。かといって、PCサイトを見る人がいなくなったわけではないので、こちらもきちんとしないといけません。とはいえ、両方を別々のソースで展開するのは、内製化する上で現実的ではありません。

問題なのは横幅。
縦幅は伸びても「見づらい」以外影響はないですが、横幅はGoogle社が検索エンジンに対して提唱している「モバイルフレンドリー」に反し検索結果に影響を及ぼす可能性があるため、気をつけなければいけません。

そこで簡単にできる両サイトのサイズをうまく調整するために、発行されたソースコードを少し編集するだけで対応できるテクニックをご紹介します。
※ホームページの構造によってはこの対応ができない場合もあります。その場合は制作会社に相談して下さい。

【変更したソースコード】
<iframe width=”100%” height=”315″ src=”https://www.youtube.com/embed/qeJK3y7_ngQ” frameborder=”0″ allow=”accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe>

もちろん、システムで元々調整できている場合は、わざわざ変更する必要はありません。