サイトの印象を変えたい!HTMLで動画を埋め込みする方法【初心者向け】

初心者向けにHTMLで動画を埋め込みする方法を解説しています。サイト内に動画を載せて印象を変えたいと思っている人は役に立つはずです。実際にソースコードを書きながら動画の埋め込みをしているので、すぐに形になるでしょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が1,000以上あります。

今回は、HTMLで動画を埋め込みする方法について紹介していきます。サイトのトップに動画を入れているサイトも増えてきているので、トレンドを抑えるためにも役立つ知識になるでしょう。

HTMLについてそもそもよく分からないという方は、HTMLとは何なのか解説した記事をまずご覧ください。

 

なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのカリキュラムをもとに執筆しています。

 

目次

 

動画の埋め込み方法

動画を埋め込むにはいろいろな方法がありますが、最も簡単に埋め込むだけであれば、<ifarme>タグを用いるのが一般的です。

<iframe>を使うと、動画の大きさから、URLまで設定でき、HPにアップロードしている動画だけでなく、「YouTube」にアップされている動画を埋め込むことができます。

また、HTML5から<video>タグが実装されました。これは、今までの<iframe>タグにはなかった「loop」や「autoplay」といった機能が実装できます。

上記2つのやり方を見ていきましょう。

 

20160620

 

videoタグって何でしょうか?

 

20163020-2

 

HTML5から追加された、動画のためのタグなんだ。

 

20160620

 

youtubeの動画を自分のサイトで使う時は、iframeタグで書いてたんですけど。

 

20163020-2

 

そうだね。ただ、動画専用のタグだと色々な用途に使うことが出来るんだ。とりあえず、簡単に書いてみよう!

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

実際に書いてみよう

実際にソースコードを書いてみて、Webブラウザーで確認をしましょう。動画を準備して、同じ階層においてください。

下記の「sample.mp4」の部分を自分のビデオファイルと同じ名前にしましょう。

HTML -iframe-

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>sample</title>
  </head>
  <body>
    <iframe width="560" height="315" src="sample.mp4" frameborder="0" allowfullscreen></iframe>
  </body>
</html>

HTML -video-

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>sample</title>
  </head>
  <body>
    <video controls autoplay loop><source src="sample.mp4"></video>
  </body>
</html>

今回、<iframe>タグはそのままで使っていますが、<video>タグはいくつかオプションを付けてみました。

今日のHTMLコーディングではインラインフレームが使用できないようなページが増えているので、<video>タグを使うのが良いかもしれません。クラッカーと呼ばれる悪い人たちによってHPの悪意のある改ざんを可能にしてしまいやすい要素であるからです。

<iframe>はいわば別のページを表示する仕組みですので、別ページを表示できるHTMLの構造自体を廃止してしまうという動きがあります。

今から組む方は<video>タグで挑戦してみるといいかもしれません。

HPの中には<iframe>が使用できないところもあるので、気を付けておきましょう。

 

20160620

 

ブラウザで見たところ、どちらも変わりないですね。

 

20163020-2

 

確かにそうだね。

 

20160620

 

videoタグ特有のことって無いんですか?

 

20163020-2

 

動画をページの背景につかったり、オリジナルの再生ボタンを作れたり、コマ送り表示とかプログラミングと親和性が高いんだ。実は、youtubeの動画もvideoタグで再生できたりするんだよ。

 

20160620

 

難しそうだけど、面白そうですね!

 

[お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。