youtube動画をホームページへ設置しよう（レスポンシブWEBデザインにも対応

動画の効果は絶大

動画ってすごいですよね。興味のある物が写った写真や説明している文章よりもパワーがあります。
画と音で表現できるので人間の五感の内、視覚と聴覚の2つを刺激できます。なので人の感覚へ訴えかける効果が増えるので広告宣伝効果は絶大です。
ただし動画を見るには動画の長さだけ時間が必要になります。また長い動画はファイル容量が大きくなります。
動画の長さや再生までにかかる「時間」についても考える必要がありますが、ハマればその効果は絶大です。
そんな「動画」をホームページへ設置したら効果がありそうですよね？では実際にホームページに設置するにはどうしたらいいでしょうか・・・

動画ファイルを作成して、各ブラウザ用に再生できるフォーマットを用意して、早く再生できるように圧縮して、HTMLで表示を作り込んで・・・・といった方法もありますが面倒です。
でもyoutubeへアップしてリンクを設置すれば設置するための「埋め込みコード」や「共有する為のリンク」など便利な機能が用意されています。
今回はyoutube動画をホームページへ設置する方法について紹介します。

youtube動画をホームページへ設置する

youtubeのアカウントを作成して、動画をアップしましょう！
googleアカウントがあればすぐにログインして撮影した動画を掲載する事ができますよ。

動画をアップしたら動画の再生ページを見てみましょう！動画の下に「共有」ボタンがありますよね。まずはこれをクリックです。

すると項目が新しく出てきますよね。
「共有」の表示をクリックして出てくる文字（URL）をはリンクに使えます。メールへ書いて送れば誰かに教える事もできます。
また各種SNSのボタンが出ていますが、こちらをクリックすればあなたのアカウントへ投稿する事ができます。

ホームページへ設置するには「埋め込みコード」

埋め込みコードと書かれている部分をクリックしてみてください。
すると画面がまた変わりますよね。
そこに出てくる文字をコピーして、設置したい部分へ貼り付けてください。これでyoutube動画の設置は完了です。

動画の表示サイズを変える

そのまま設置すると動画が小さすぎる・大きすぎるということもあると思います。
そんな時はホームページへ貼り付ける文字の一部を直してみてください。

<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/5xT5OwJ9S5U” frameborder=”0″ allowfullscreen></iframe>

赤の数値を変えると幅が
青の数値を変えると高さがそれぞれかわります。
この数値を変えて、ちょうどいい大きさにしてください。

レスポンシブWEBデザインなどに対応する

レスポンシブWEBデザインで作られたページやスマートフォンページなど、ページの横幅が決まっていない場合、縦横の大きさがしっかりと決まっていると何かと不都合ですよね。そんな時はCSSを使って解決する事ができます。

こんな感じでHTMLとCSSを書いてみてください。
画面幅によって高さが変わるので、思ったような動作ができるはずです。

まとめ

・動画をホームページへ設置するにはyoutubeの機能を使えば簡単
・「共有」からSNSへの投稿などができる
・「埋め込みコード」でホームページへ設置するコードを取得できる
・ホームページへ設置するサイズを変えるには埋め込みコード内のwidhtとheightをそれぞれ変更する
・レスポンシブWEBデザインへ対応するにはCSSを活用する