HTMLで動画や画像を埋め込みする方法を詳説

HTML

動画をサーバーにアップロード

まず保存してある動画をサーバーにアップロードします。

FTPソフト（ここではFileZilla）を立ち上げて接続をします。
詳細については以下の記事をご覧ください。

FTPとはなにか　FileZillaでデータをサーバーにアップロードをする方法を詳細解説

立ち上げたFileZillaのローカルサイトからパソコンに保存している動画ファイルを
ドラッグアンドドロップでpublic_htmlにコピーします。
コピーしたづァイルはリモートサイトの下の部分に保存されます。

HTMLで動画を埋め込む

動画を埋め込むのに最も簡単なのは<ifarme>タグを用いることです。

ユーチューブにアップされている動画の梅込み。

YouTubeはこれで動画埋め込みのコードを作っています。

ジョーン・バエズが振られたボブ・ディランに対する失恋を曲にしたものだと言われている「Diamonds and Rust」。
今聴いても心が震えます。
私はこの曲を作ったジョーン・バエズよりもジョディコリンズの歌のほうが好きなんですが。
二人で歌っている動画がYouTubeにあったので貼り付けてみました。
もう７０歳過ぎてるんですけどね。
私が最初に聴いたときにはすでに懐メロになっていましたから当然か。
これをこの記事に貼り付けるのは実に簡単で。
動画の下にある「共有をクリック」

クリックして出てきた画面のURLをコピーか。
「埋め込み」をクリック。
大きさなどを変えられるのでわたしは埋め込みを使います。
URLを記事に貼り付ければ動画を貼り付けたことになります。

「埋め込み」を、クリックすると次のような画面が出てきますので
コードをコピー。

記事に貼り付けます。

先程の埋め込みコードには確かに大きさやURLが書き込まれています。
大きさは数値を変えれば変更することが出来ます。

保存している動画の埋め込み

保存された動画と言ってもPCに保存しただけではだめでサーバーにアップしておかなくてはなりません。
初心者だと初歩的なことでもつまずいてしまうこともあるかと思い（自分のことですが^^;）、再確認の意味で書いておきます。

<ifarme>タグで動画を貼り付け

これで動画を貼り付けるやり方についてまずは書いてみます。

以下のように記述すると

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

HTMLの基本の説明を簡単にしておきます。

HTMLは入れ子構造（ネスト）にっていて。大きなものの中に小さなものを次々に入れることができるようになっています。
そして<html>という親要素の中に<head>や<body>といった子要素が記述されるというルールがあります。

<html>~</html>はhtmlで記述されている範囲を表し。

その中にある子構造<head></head>はページのヘッダー情報の範囲を示します。
<head></head>の中に書かれている<meta charset=“UTF-8”>というのは
メタ情報（あるデータが付随して持つそのデータ自身についての付加的なデータ）を示しています。
ここでは、このファイルの文字コードが UFT-8 であるということです。

<head></head>の子要素<title></title>は指定したファイルのタイトルを示します。ブラウザ上ではタブの部分に表示されます

<body></body>はラウザに表示サれる内容が書かれている範囲を指定します。
ここでは動画が指定されていまして。

ただこのような記述方法は別のページを表示する仕組みですので

それぞれの閲覧コンテキストは完全な文書環境であるため、ページの中で <iframe> を使用するごとに、必要となるメモリやその他の計算リソースが増加します。

ということで今後廃止の方向にあるということです。
ただ簡単に表示できますので。便利は便利です。

<iframe></iframe>の中の小要素。

widthは幅の指定

heightは高さの指定

srcは画像や文書など、表示させるファイルの出処を指定します。
ここではサーバー内に保存してある動画のフィル「Atoms – 13232.mp4」を入れました。

frameborderは数値をゼロにするとフレームの境界線を消す事ができます。
allowfullscreenは全面表示ができるようにするもの。

<video>タグで動画の貼り付け

なのでYouTubeなどがまだ<iframe>タグを使っていますのでまとめてみましたが。
実際の埋め込みは<video>タグを使って行います。

これが非常にシンプルで。動画をそのまま表示するのであれば。

<video src=”.Atoms – 13232.mp4″></video>
で済みます。

実際にコードを書いてみます。

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

controls属性でインターフェースを表示します。
autoplay属性を指定すると、ウェブページを読み込んだ時点で、動画が自動再生されます。
loop属性を指定すると繰り返し再生されます。

それを入れて実際にコードを書くと以下のように動画が表示されます。

タグのcontrols属性を指定すると、再生・一時停止・再生位置の移動・ボリュームなど、動画を利用しやすくするインターフェースを、ブラウザが自動で表示してくれます。

もし大きさを指定したい場合は

<video controls autoplay loop width="320" height="240">

として大きさを追加して指定することが出来ます。

HTMLで画像の埋め込み

画像の貼り付けタグはimgです。GIF・JPEG・PNGの三種類が使えます。

このimgタグは単独で使われます。範囲や他の属性は付きません。

src属性で指定した画像を表示します。

alt属性（alternate attribute）というのは
目の不自由な方のための読み上げ機能で何の画像なのかを読み上げます。
Googleなどの検索エンジンもこの属性で何の画像か判断しますので書いておいたほうが良いと思います。

title属性は画像やリンク先のタイトルを表示します。
画像にマウスを当ててしばらくおいておくとタイトルが表示されます。

全体のコードは以下です。

<!DOCTYPE html>
 <html　lang=ja">
 <head> <meta charset="utf-8" > 
<title>ボディビルダー</title> 
</head> 
<body> 
<img src="画像/筋肉.png" alt="ボディビルダー"title="ボディビルダー">
</body> 
</html>

画像の指定ですが。

サーバーの