記事・特集リスト
無料お役立ち資料
本サイトについて
お問い合わせ
閉じる

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

動画・外部コンテンツの埋め込み方法を、初心者の方向けに紹介。 各方法サンプルコード付きで詳しく解説。サンプルコード付きなので実際に手を動かして学ぶ事ができ、ご自身のweb制作に活かす事ができます。

カテゴリ: HTML/CSS

こんにちは!
最近、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制作の幅が大きく広がります、ぜひ参考にしてみて下さい。

最後までお読みいただきましてありがとうございます。ご意見・ご要望などございましたら、
以下のフォームよりお問い合わせを受けつけておりますので、よろしければご利用ください。

この記事がお役に立ちましたら、"いいね!"をお願いします
minwebの最新情報をお届けします

minweb編集部(株)セルリア

”共に考え、共に創るWebの成功戦略”というスローガンのもと、お客様と一からWeb戦略を考え、
企画し実装まで支援する伴走型Webコンサルティング会社です。

こちらの記事をお読みのかたにおすすめ!完全無料のダウンロード資料

Googleサーチコンソール使い倒し活用術  <AOHON>

ダウンロード資料画像

Googleの検索エンジンに関する情報を幅広く確認できるツール「Googleサーチコンソール」の活用方法をまとめました。新サーチコンソールの機能を網羅的に紹介するだけでなく、Webサイトを最適化できる実践的な方法までわかりやすく解説します。

サーチコンソール初心者の方が知りたい導入方法から、上級者向けのコンテンツ改善の方法まで、押さえておきたい要素を1つに集めた、SEOに力を入れたいすべてのWeb担当者におすすめの一冊です。