HTML動画+外部コンテンツの埋め込み（初心者向け）

こんにちは！
最近、WEB制作をはじめたけど「WEBページに動画を埋め込んでみたい・・！」 「youtubeやGooglemapって、自分のWEBページに埋め込めるの・・？」「埋め込んで自分なりにカスタマイズしてみたい・・！」
そのように悩んでいる、初心者WEB製作者の方も多いのではないでしょうか？

動画や外部サイトの埋め込みができると、制作の幅が広がり、よりよいWEBサイトの制作ができるようになります。

今回は、「動画の埋め込み方法」「外部サイトのWEBページを埋め込む方法」「各属性の意味・カスタマイズ方法」を中心に解説していきます。

webサイトに動画を埋め込む・外部サイトのWEBページを埋め込む方法

WEBサイトに動画、外部サイトのWEBページの表示方法

1.「videoタグ」。動画ファイルをアップロードし動画を埋め込む事ができる。

2.「iframeタグ」。youtube、Googleマップなどの外部サイトのWEBページを埋め込む事ができる。

順番に解説していきます。

「videoタグ」ファイルをアップロードし動画を埋め込む方法

「videoタグ」とは？

videoタグとはHTML5で新たに追加されたタグで、動画を埋め込むときに使用します。

サンプルコード表示結果

HTMLサンプルコード

※今回のサンプルコードは、samplevideoとういファイル名にしてますが、ご自身で保存されたファイル名に変え表示してください。

※解説
videoタグのsrc属性に動画のファイルパスを指定し、動画を表示させます。

これがもっともシンプルな書き方です、しかしこれだけだと動画ファイルを読み込んでいるだけで、再生もされずただ表示されている状態です、ここで「videoタグに追加できるオプション属性」が登場します。

基本の書き方に「videoタグのオプション属性」を追加していく事で、「自動再生」「繰り返し再生」「コントロールパネルの表示」「高さ、幅」などを指定する事ができます、それでは各属性について解説していきます。

autoplay・muted属性

サンプルコード表示結果

HTMLサンプルコード

※解説
autoplay属性は、動画を自動再生させる属性でmuted属性と合わせて使用します。
muted属性は動画の初期設定を「音なし」にする事ができる属性であり、chromeやsafariでは「autoplay属性とmuted属性」を合わせて使用しなければ自動再生できません。（WEBサイトを開いて、いきなり音が出てきたら困るケースもありますよね）

loop属性

サンプルコード表示結果

HTMLサンプルコード

※解説
loop属性を追加する事で、繰り返し再生をする事ができます。

controls属性

サンプルコード表示結果

HTMLサンプルコード

※解説
controls属性は、「再生・停止ボタン」「再生位置のバー」「音量位置の調整」などのコントロールパネルを表示してくれます。
コントロールパネルはユーザーにとって使いやすく、便利なものですので設定する事をオススメします。

preload属性

サンプルコード表示結果

HTMLサンプルコード

※解説
preload属性は、あらかじめ動画データを読み込んでおくかを、ブラウザに指定するタグです。（再生ボタンを押す前から）

●preloadに指定できる値
「preload=”none”」preload属性にnoneを指定→事前ファイルの読み込み禁止
「preload=”auto”」preload属性にautoを指定→ファイルデータを事前読み込み
「preload=”metadata”」preload属性にmatadataを指定→動画の長さなど（メタデータ）だけを事前読み込み

ただしautoplay属性を指定している場合は、preload=”none”としていても値は無視されます。

poster属性

サンプルコード表示結果

HTMLサンプルコード

※解説
poster属性は、動画の再生が開始されるまでの間、サムネイル画像の表示を指定する属性です。

playsinline属性

※解説
playsinline属性は、全画面を表示せずにその場で再生する（インライン再生）する事のできる属性です。スマートフォンの為に設定します。（スマホで動画がいきなり全画面表示されたら使いずらくなるため） 「autoplay」「muted」「playsinline」の3属性、合わせて記述する事が必須です。

width・height（横幅・高さの指定）

サンプルコード表示結果

HTMLサンプルコード

※解説
videoタグにはwidth（幅）height（高さ）属性を指定し、動画の大きさを指定する事ができます。
単位はpxのみの指定となっており、パーセントでの指定ができず、レスポンシブ に対応できないので、cssで大きさを調整するのがおすすめです。

どのブラウザでも動画ファイルを再生

mp4形式で動画が再生されない時の事を想定し、複数形式の動画ファイルを用意していくことをオススメします。

※解説
sourseタグにsrc属性を記述し、videoタグで囲みます。
「mp4」「webm」「video.ogg」「エラーメッセージ」の順に記述し全ての形式に対応、もしくは対応できない場合はエラーメッセージを表示できるようにします。

videoタグで動画が表示されない原因

○iPhoneで表示されない原因

「playinline属性」が入力されていない事が原因として多いです。
iPhoneではインライン再生でないと動画を表示してくれません、スマートフォンユーザーが多い現在は、必ず「playinline属性」を指定することをオススメします。

○Androidで表示されない原因

「ベーシック認証」が指定されている事が原因として多いです。
ベーシック認証とは、webページにアクセスできるユーザーを制限する機能です、Andoroidではベーシック認証がかかったまま動画再生をする事ができないので、ベーシック認証を解除して動画再生できる環境にしましょう。

○IE8以前

今はサポートが終了しほとんどありませんが、IE8以前ではvideoタグは使用することができません。

「iframeタグ」外部コンテンツを埋め込む方法

「iframeタグ」とは？

外部サイトのWEBページを自身のサイトに埋め込むことができるタグです。
例えば、「youtube」「googlemap」「twitter」「facebook」「instagram」などを自身のWEBページに埋め込む事ができます。

○「iframeタグ」基本記述

・＜iframe＞〜＜/iframe＞タグ内に記述 ・width（幅）、hegiht（高さ）で埋め込むページの大きさを指定する、pxのみの指定となり、CSSを使用しなければ%では指定できない
・src属性に読み込みたいページのURLを記入

上記が基本的な記述の仕方です、もっと詳しく知りたい方は下記を参照にしてみてください。

https://style.potepan.com/articles/20040.html

Googlemapの埋め込み方法

①googlemapで埋め込みたい地図を選ぶ。

②表示されたらパネルの「共有」をクリック

③新しいパネルの「地図の埋め込み」を選び、「HTMLコピー」をクリックしコピーする

④コードを貼り付け表示(width、heightなどの属性をお好みに合わせて変更する）

youtubeの埋め込み方法

①youtubeで埋め込みたい動画を選ぶ

②動画の右下にある「共有」をクリック

③表示パネルの「埋め込み」を選び、コードが表示されるのでコピーする

④コードを貼り付け表示(width、heightなどの属性をお好みに合わせて変更する）

まとめ

今回は主に
①「videoタグを使用し、動画を埋め込む方法」
②「iframeタグを使用し、Googleマップ、youtube、外部サイトのWEBページを埋め込む方法」
　の2点について解説してきました。

ポイントをまとめると
●「Videoタグ」は動画ファイルをアップロードし、動画を埋め込む際に使用するタグで、
　基本記述は＜video src=”video.mp4″＞＜/video＞でした。
　各属性を追加していき機能を追加していきます。

●iframeタグは外部サイトのWEBページを自身のサイトに埋め込むことができるタグで、
　各コンテンツから「iframe」タブをコピーし貼り付けることで簡単に表示させる事ができます。

いかがだったでしょうか？

動画や外部WEBサイトを埋め込み、表示できることでweb制作の幅が大きく広がります、ぜひ参考にしてみて下さい。

その他、同じような話題で以下も取り上げていますので、よろしければご覧ください。

WordPressでバックアップをとる方法【タイミング/用途別で解説】

バックアップの必要性とWordPressでバックアップをおこなうやり方を紹介します。

【最短】WordPress（ワードプレス）で問合せフォームを設置する方法

お問い合わせフォームをWordPressで簡単に設定する方法やカスタマイズする方法を解説します。

【WordPressの基礎・始め方】半日でゼロからブログを立ち上げる方法

今までサイトを開設した事がない人でも簡単にできる、WordPressを活用したブログの立ち上げ方を紹介します。

<a href="https://digitor.jp/textbook/html-video-embedding/">HTML動画+外部コンテンツの埋め込み（初心者向け）</a>