WEBページに動画を埋め込みする：videoタグ・Youtubeリンク

WEBサイトのページに動画を埋め込むのはYoutube等の別サイトの動画をiframeでリンク表示する方法とvideoタグを読み込む方法があります。

Youtubeは特に問題はありませんが、videoタグは動画ファイルの種類の影響で再生できない場合の準備が必要です。

動画を埋め込む時はファイルの重さ、そして初期設定で音が鳴らない様に注意をしましょう。

WEBページに動画を埋め込むパターン

本WEBページの様に上部に動画が埋め込まれたWEBサイトってかっこいいですよね。

WEBサイトのページ上に動画を埋め込む方法には、大きく2つの手段があります。

WEBサイトに動画を表示させる手段

一番簡単な方法はYouTube動画をリンクさせる方法でしょう。

Youtubeの動画をリンクさせる場合

ファイル自体はYouTubeにあるので、サーバーに動画をアップする必要なく動画を公開できます。

その代わりYoutubeに動画をアップしておく必要があります。

ただリンクをさせているだけなので、ファイルの重さや通信量を考慮する必要はありませんね。

直接動画を埋め込み・配信する場合

あくまでオリジナルのPR動画を配信する場合はYoutubeに頼らずに自力で動画を配信するべきでしょう。

本WEBページの様に動画の上に文字テキスト載せたり等をする場合は加工がしやすい事もあります。

ただサーバーに動画ファイルを直接アップロードする必要があるので、動画の容量によっては読込に時間が掛かる場合があります。

当然通信量も増えてくるので、アクセス数が増加すると転送量が上限に達する場合は表示されにくくなったりします。

埋め込む動画の準備について

無料イメージ動画

あくまでイメージ動画（本記事の動画のような）で構わない場合は、無料で使える動画素材のサイトがあります。

そのサイトへアカウント登録をしてダウンロードして利用しましょう。

表示させる際はその動画が「ロイヤリティフリー」かどうかを確認しておきましょう。

無料動画素材サイト

撮影からおこなう場合

オリジナル動画を撮影する場合は簡単で良いのなら、iPhoneやAndroidなどのスマホで十分撮影ができます。

インタビューやセミナーなどの動画撮影であれば、手振れなどを防ぐ意味でも固定されたカメラがいいでしょう。

画質にこだわるのであれば専用のビデオカメラの購入も検討が必要ですね。

いずれも撮影したデータをパソコンに取り込んで編集をおこなう事になります。

Youtubeから拝借する場合

Youtubeの動画をiframeでリンクして表示する場合は基本的には自由だと思いますが、状況によっては許可が必要な場合もあります。

仮に著作権などがなくても、他のWEBサイトで勝手にリンク視聴されては困るジャンル・内容の動画もあります。

その懸念があれば管理者に事前にリンクの許可申請をするべきです。

Youtube動画の埋め込み手順

WEBページにYoutubeの動画を埋め込む場合はiframeタグを使用します。

iframeタグとは、そのタグで囲まれた中だけ別のWEBページを開く事ができるタグです。

<iframe width="100%" height="315" src="https://www.youtube.com/embed/CwkzK-F0Y00" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen> </iframe>

iframeは本来、指定された区画内に別のWEBページを表示させるために頻繁に使われる便利なタグです。

その区画内に指定したYoutube動画を指定するのですね。

Youtube動画

Youtubeの動画の設置の仕方

表示させたいYoutube動画を開いて、右下の共有ボタンを押します。

開いたウィンドウの左にある「埋め込む」ボタンをクリックします。

右に表示されたコードをコピーしてWEBページの位置に貼り付けるだけです。

表示サイズなどを変更したい場合はwidthやheightの数値を変更しましょう。

videoタグによる埋込手順

まずはオーソドックスな「video」タグを使った動画の埋め込み方法です。

videoタグはimgタグと同じようにmp4やwebmなどの動画ファイルを読み込んで表示します。

videoタグ（基本）

<video src="video/video.mp4"></video>

src=""の中に動画ファイルのパスが入ります。

これがもっともシンプルな表示の仕方ですが、これだけでは動画の再生はされません。

埋め込む以外に操作が必要

上記は埋め込んだだけですので、さらに再生やコントロールするタグを加えていく必要があります。

例えば本記事を開いた途端に音が鳴ったりすると困る場合がありますよね。

ですので音が出ない設定は必須です。

では埋込動画を自動再生したりコントロールパネルを表示させるため、videoタグに設定を加えていきます。

videoタグ属性一覧

videoタグの属性にはいろいろな種類があり、ミュートや自動再生機能・ループ機能などを設定することができます。

autoplay	動画が自動再生させる
muted	音が出ない
controls	コントロールパネルボタンを表示
loop	動画が繰り返し再生される
playinline	映像をインラインで再生する 別枠でなくWEBページ内で再生する指定
poster	動画が読み込みできない場合に表示させる画像の設定
preload	ページ読み込み時に、動画をあらかじめ読み込むかどうかを設定
	none 事前のファイルの読み込みを禁止
	metadata 長さやファイルサイズなどのメタ情報（動画の情報）だけを読み込む
	auto 初期値：動画ファイルを事前にダウンロードする
width height	動画枠の幅・高さを設定

この中から自分の目的に応じてタグを追加していきます。

例えば、自動再生とループ再生とコントロールを付けたい場合は、muted,autoplay,controlsの属性を追加する事になりますね。

属性を入れる場所は以下の部分です

<video muted autoplay playinline loop controls> <source src="movie/movie.mp4"> </video>

Chromeおよびスマホ表示の際は注意

Google Chromeで表示をさせる場合、属性のautoplayとmutedは必須で使うようにしないと動画が表示されない様です。

autoplayは自動再生、そしてmutedは音を消すための属性です。入れるのを忘れない様にしましょう。

スマホ表示のために「playinline」も忘れずに

iPhone（Safari）での表示の際は、上記のautoplayとmuted以外にplaysinlineも必須で入れるようにしましょう。

このplaysinlineの設定により、スマホページの表示時に中で動画が表示されるようになります。

複数形式の動画を準備する

サンプルでは拡張子mp4の動画になっていますが、状況によってはmp4の動画が再生されない場合もあります。

その場合は、mp4以外の別の形式の動画を用意しておく事で対処します。

ソースコード

<video autoplay playinline loop controls> <source src="video/video.mp4"></source> <source src="video/video.webm"></source> <source src="video/video.ogg"></source> </video>

上記のようにsourceタグを追加します。

読込の流れ

表示されなかった場合に画像を表示

src属性の中で用意した複数の動画形式と動画でも表示されなかった場合は、poster属性で代替画像を表示させる事ができます。

代替画像を表示させた場合

動画は流れませんが、代わりに動画開始場面のjpeg画像が表示されています。

画像の上に「動画が表示できません」などの文章を入れたりしておくとよいでしょう。

代替画像とセットでplaysinlineは入れておく事

スマホページでの閲覧を想定して、videoタグの中にはplaysinlineまで入れておくべきと上で説明しました。

このplaysinlineが入っていないとスマホ版では代替画像も表示されない場合があります。

用意する動画の形式はmp4でOK

現在ではmp4形式をほとんどのブラウザが対応しているので、動画ファイル形式はmp4で問題ありません。

Google Chrome、Microsoft Edge、Safari、Firefoxなどほとんどの主要ブラウザはmp4に対応しています。

ですのでmp4形式の動画であれば、まず間違いなく動画は見れるはずです。

Youtube動画の場合はそういった事は起こりませんので問題はありません。

mp4を他の形式に変換するサービス

mp4を他の動画形式にするツールはたくさんあります。必要であればWEB上のツールを探してみましょう。

こういった動画変換ツールは一つは準備しておいた方が良いと思います。

動画変換ができるWEBツール

いずれのWEBサイトも無料で使える音声ファイル・動画ファイル変換ができます。

WEBサイト上でMP4まで形式を変換したいファイルを選択し、変換したいフォーマットを選択するだけで変換してくれるので便利です。

変換できる形式はmp3・mp4・mov・wav・wmvなど豊富な種類に対応しています。

videoタグで動画が表示されない場合の対策

videoタグを使って汎用性の高いmp4動画を埋め込みしていても、時にその動画が表示されない場合があります。

このように動画が表示されないケースとその対処方法をご紹介しましょう。

「Basic認証」が掛かったAndroid端末

特定のWEBページにアクセスした時、事前にユーザー名とパスワードを入力する事を促す画面がたまにありますよね。

これは「Basic認証」と呼ばれるアクセス制限機能です。

Basic認証の画面

ログイン情報を知っている人のみがWEBページを閲覧できるので、そのページを開くユーザーを制限する事ができるのです。

そのBasic認証がかかったページをandroid端末で閲覧する場合に、このvideoタグの埋込動画を見ることができません。

この場合の解決法としては、このBasic認証を解除して確認するしかありません。

mp4形式なのに再生ができない

mp4形式の動画なのに時折videoタグで再生ができないというケースがたまにあります。

コーデックが（圧縮データ方式）が違う

実はmp4の中には動画を圧縮する「圧縮データ方式」に種類があります。それをコーデックと呼びます。

・MPEG-4・MPEG-2・H.264・H.265・VP9・VP8・Xvid・Divxなどいろいろなコーデックの種類があるのですね。

ですのでこのコーデックを確認してmp4を変換し直す（エンコードする）事で表示できる様になります。

エンコードソフト

エンコードをおこなうツールはたくさんありますので、いろいろ調べてみてください。

MediaCoder

IEでvideoタグが使えない場合

今は古いIE（InternetExplorer）を使っている人は少ないと思いますが、IE8以前ではこのvideoタグ自体が使えません。

ですのでIE8以前に対応しようとするならば、JSファイルの補助が必要です。

HTML5のvideo要素やaudio要素をサポートしていない旧式ブラウザでも下記を追加するだけで利用できるようになります。

「html5media.js」を使用

<head></head>の中で、の直前位に以下のコードを追記しましょう。

<!--[if lt IE 9]> <script src="http://api.html5media.info/1.2.2/html5media.min.js"></script> <![endif]-->

本来はIE8以前に対応する必要は無いと思います。ブラウザのバージョンはセキュリティのためにも上げておかなければなりません。

動画が見れないのはユーザー側に問題があるのですから、基本的にここまで対応をする必要は無いと思います。

背景にvideo動画を埋め込んだ事例（jquery使用）

本WEBページ上部にある動画はjqueryを使った背景埋込動画です。

背景に埋込をしているので、上にいろいろなデザインのコンテンツを載せる事ができます。

構成コード

HTML

<section class="slider-parallax video-background-banner parallax" data-jarallax='{"speed": 0.6}' style="background-image: url('video/video.jpg');" data-jarallax-video="mp4:video/video.mp4,webm:video/video.webm,ogv:video/video.ogv"> <div class="slider-content-middle"> </div> </section>

CSS

.slider-parallax { height: 500px; position: relative; } .slider-content-middle { position: absolute; display: inline-block; width: 100%; top: 50%; left: 0; -webkit-transform: translate(0,-50%); -moz-transform: translate(0,-50%); -ms-transform: translate(0,-50%);-o-transform: translate(0,-50%); transform: translate(0,-50%); } /*scroll-down*/ .scroll-down { text-align: center; width: 34px; height: 58px; display: inline-block; border-radius: 20px; border:2px solid #fff; position: absolute; left: 50%; bottom: 60px; margin-left: -17px; line-height: 50px; } /*video-background-banner*/ #video-background.bg-overlay-black-50:before { z-index: 0; } .video-background-banner h1 { font-size: 40px; line-height: 80px; font-weight: 600; text-transform: uppercase; } .video-background-banner .slider-content { border:20px solid #84ba3f; width: 50%; margin: 0 auto; padding: 60px 30px; } .video-background-banner .slider-content span { font-size: 22px; line-height: 22px; color: #ffffff; display: block; margin-bottom: 20px; } .video-background-banner .slider-content p { font-size: 18px; line-height: 22px; color: #ffffff; margin-top: 20px; } @media only screen and (max-width: 767px) { .video-background-banner .slider-content { border: 10px solid #84ba3f; width: 100%; margin: 0 auto; padding: 30px 10px; } .video-background-banner h1 { font-size: 20px; line-height: 30px; font-weight: 600; text-transform: uppercase; } }

JS

<!-- plugins-jquery --> <script src="js/plugins-jquery.js"></script>

背景にYoutube動画を埋め込んだ事例（jquery使用）

Youtubeの動画を背景に埋め込んだタイプをご紹介します。

同じく背景に埋込しているので上にコンテンツを載せる事ができます。

構成コード

HTML

<section class="content-section video-section"> <div class="pattern-overlay"><a id="bgndVideo" class="player" data-property="{videoURL:'https://youtu.be/uYd-v5fMlBE',containment:'.video-section', quality:'large', autoPlay:true, mute:false, opacity:1}">bg</a> <div class="container"> <div class="row"> <div class="col-lg-12"> <h1>intorior <span class="text-uppercase text-theme-color">desing</h1> <h3>we providing best service for 20+ years</h3> </div> </div> </div> </div> </section>

CSS

.video-section .pattern-overlay { background-color: rgba(15, 38, 58, 0.6); min-height: 700px; padding: 110px 0 32px; } .video-section h1 { font-size: 60px; font-weight: bold; line-height: 1.2em; margin: 40px auto 0; text-shadow: 1px 1px 1px #000; text-transform: uppercase; } .video-section h3 { font-size: 25px; font-weight: lighter; margin: 0 auto 15px; } .video-section h1, .video-section h3 { color: #fff; text-align: center; }

JS

<script src="js/jquery.mb.YTPlayer.js"></script> <script src="js/all-jquery.js"></script> <script> $(document).ready(function () { "use strict"; $(".player").mb_YTPlayer(); }); </script>

まとめ

以上WEBページへの動画の埋込方法をご紹介しました。

jqueryの背景埋込に関して特にJS部分の詳細は割愛しておりますが、どうぞご了承下さい。

埋込方法だけならvideoおよびYoutubeで十分ですし、背景動画の方法は他サイトでもたくさん紹介されていると思いますので、ぜひ参考にされて下さい。

上記には十分注意をして埋め込むようにしましょう。

一押し人気コーナー紹介