YouTubeの動画をウェブサイト(ホームページやブログ)に貼り付ける方法

寂光院
動画をウェブサイト(ホームページやブログ)内で公開しようとした場合、PCやスマホ・タブレットなどすべてのデバイスで問題なく再生できるかどうかは問題が多い。

なぜなら、動画というものはmp4やwmv、aviなど多くのファイル形式があるだけではなく、コーデックというものの種類によっても再生できるかどうかが分かれるため、画像(写真やイラスト)などのようにすべてのデバイスで閲覧できるようにするには難易度が高い。

そのため、最もお手軽かつ確実性の高いやり方としては、まずYouTubeに動画をアップロードし、それを自分のウェブサイト内に貼り付けるやり方が簡単である。
ほとんどのデバイスで再生できるようにYouTube側で自動変換してくれるからです。

YouTubeの動画を自分のサイト内に貼り付ける手順

まずYouTubeにログインして「アップロード」ボタンから動画をアップロードする。
YouTubeのアカウントはGoogleアカウントと共通です。
動画をアップロード

次に、公開された動画のページの「共有」をクリックする。
動画を共有

すると以下のような欄が展開される。
共有するためのURL
この動画ページのURLをTwitterやメールなどに貼り付けたいだけなら、ここにあるURLをコピーするだけで良い。
しかし、動画をそのまま自分のウェブサイト内に貼り付けたい場合は、続けて以下の作業をする必要がある。

埋め込みコード」という文字をクリックすると、以下のようにHTMLのタグが現れる。(<iframe~~というやつのこと)
動画の埋め込みコード
これをすべてコピーして自分のウェブサイト内に貼り付ければ、動画をそのまま貼り付けることができる。

試しにここに貼り付けてみましょう。
こんな感じになります。

このままでも問題はありませんが、このサイトの本文欄に対してサイズ(横幅)が少し小さいのが気になります。(スマホ表示の場合は画面幅が狭いので、この時点ですでに横幅いっぱいになるでしょう)

貼り付ける動画のサイズ(縦幅と横幅)を変更する方法

ここまでで解説したやり方のままだと貼り付ける動画のサイズ(縦幅と横幅)は既定のままということになってしまう。
それが自分のサイトにちょうど良い大きさなら問題はありませんが、そのようなケースはおそらく稀だと思います。
多くの場合、横幅をもう少し大きくしたり小さくしたりなどの調整をしたほうがピッタリ収まると思われます。

例えばこのブログの場合、コンテンツ領域(本文欄)の横幅は650ピクセルである。(スマホ表示は別)
コンテンツ領域の横幅

先ほどのYouTubeの共有欄にある「もっと見る」をクリックします。
設定をもっと見る

すると以下のような設定欄が展開されるので、「動画のサイズ」というところにある入力フォームに横幅または縦幅を入力します。
横幅または縦幅のどちらかを入力してカーソルを外せば、もう片方の数値は動画の縦横比に応じて自動的に入力されます。
動画のサイズを入力

入力が終わると、埋め込みコードの横幅と縦幅の数値が自動的に変更されているので、コードをすべてコピーして自分のウェブサイトに貼り付ければオーケーです。
埋め込みコードをコピー

動画のサイズを変更するとこんな感じになります。

横幅がピッタリになって見栄えが良いですね。