YouTubeの動画をウェブサイト(ホームページやブログ)に貼り付ける方法
- 公開日 : 2015年12月21日
- カテゴリ : Web制作
動画をウェブサイト(ホームページやブログ)内で公開しようとした場合、PCやスマホ・タブレットなどすべてのデバイスで問題なく再生できるかどうかは問題が多い。
なぜなら、動画というものはmp4やwmv、aviなど多くのファイル形式があるだけではなく、コーデックというものの種類によっても再生できるかどうかが分かれるため、画像(写真やイラスト)などのようにすべてのデバイスで閲覧できるようにするには難易度が高い。
そのため、最もお手軽かつ確実性の高いやり方としては、まずYouTubeに動画をアップロードし、それを自分のウェブサイト内に貼り付けるやり方が簡単である。
ほとんどのデバイスで再生できるようにYouTube側で自動変換してくれるからです。
YouTubeの動画を自分のサイト内に貼り付ける手順
まずYouTubeにログインして「アップロード」ボタンから動画をアップロードする。
YouTubeのアカウントはGoogleアカウントと共通です。
すると以下のような欄が展開される。
この動画ページのURLをTwitterやメールなどに貼り付けたいだけなら、ここにあるURLをコピーするだけで良い。
しかし、動画をそのまま自分のウェブサイト内に貼り付けたい場合は、続けて以下の作業をする必要がある。
「埋め込みコード」という文字をクリックすると、以下のようにHTMLのタグが現れる。(<iframe~~というやつのこと)
これをすべてコピーして自分のウェブサイト内に貼り付ければ、動画をそのまま貼り付けることができる。
試しにここに貼り付けてみましょう。
こんな感じになります。
このままでも問題はありませんが、このサイトの本文欄に対してサイズ(横幅)が少し小さいのが気になります。(スマホ表示の場合は画面幅が狭いので、この時点ですでに横幅いっぱいになるでしょう)
貼り付ける動画のサイズ(縦幅と横幅)を変更する方法
ここまでで解説したやり方のままだと貼り付ける動画のサイズ(縦幅と横幅)は既定のままということになってしまう。
それが自分のサイトにちょうど良い大きさなら問題はありませんが、そのようなケースはおそらく稀だと思います。
多くの場合、横幅をもう少し大きくしたり小さくしたりなどの調整をしたほうがピッタリ収まると思われます。
例えばこのブログの場合、コンテンツ領域(本文欄)の横幅は650ピクセルである。(スマホ表示は別)
先ほどのYouTubeの共有欄にある「もっと見る」をクリックします。
すると以下のような設定欄が展開されるので、「動画のサイズ」というところにある入力フォームに横幅または縦幅を入力します。
横幅または縦幅のどちらかを入力してカーソルを外せば、もう片方の数値は動画の縦横比に応じて自動的に入力されます。
入力が終わると、埋め込みコードの横幅と縦幅の数値が自動的に変更されているので、コードをすべてコピーして自分のウェブサイトに貼り付ければオーケーです。
動画のサイズを変更するとこんな感じになります。
横幅がピッタリになって見栄えが良いですね。