【mp4/webmを使用】自サーバに動画を置く場合

用意するもの

• MP4形式の動画
• webm形式の動画
• 動画が再生されない時に表示する画像（動画の見せたいキャプチャなどが良い）
• スマホ用に画像など
• HTML5（videoタグ）
• CSS

mp4/webmはどちらも動画の内容としては同じです。
形式を2つ用意するのは、ブラウザによって対応出来る形式が違うからです。（プラグインを使わずに動画を再生する方法を紹介する他のブログなどでは、「.ogv」形式など他形式を含む書き方もあります。対応ブラウザに合わせて調整してください。）

以下、引用です。ご参考までに。

HTML5″<video>タグ”各端末・ブラウザ別対応動画形式一覧

この検証結果により、”<video>タグ”を使用する場合は、MP4とWebMの2点を用意すれば、ほぼすべてのブラウザに対応できることがわかった。

・MP4形式動画

（映像コーデック：H.264、音声コーデック：AAC）メタデータ無し

・WebM形式動画

（映像コーデック：VP8、音声コーデック：Vorbis）メタデータ無し

参考文献：【HTML5】各デバイス・ブラウザごとの動画再生環境調査
引用を終了します。
※引用部分は、2013年6月の記事になります。

HTML5（videoタグ）

<video id="video" poster="動画キャプチャ.jpg" preload="auto" autoplay loop>
	<source src="動画.webm" type="video/webm">
	<source src="動画e.mp4" type="video/mp4">
</video>

動画の上に、例えばサイトのタイトルなどを配置することも可能

<div id="keyVisual">
	<video id="video" poster="動画キャプチャ.jpg" preload="auto" autoplay loop>
		<source src="動画.webm" type="video/webm">
		<source src="動画e.mp4" type="video/mp4">
	</video>
	<h1 class="title"><img src="タイトル画像.png" alt="タイトル">
</div>

CSS

#keyVisual {
width: 100%;
min-width: 980px;
min-height: 640px;
padding: 0;
margin: 0 auto;
position: relative;
text-align: center;
overflow: hidden;
z-index: 1;
}
#keyVisual .title {
width: 545px;
height: 154px;
padding: 0;
margin: -79px 0 0 -272.5px;
position: absolute;
top: 50%;
left: 50%;
overflow: auto;
}
#keyVisual .title img {
position: static;
}
@media screen and (max-width: 640px) {
#keyVisual {
width: 93.75%;
min-width: 93.75%;
min-height: auto;
padding: 0 3.125%;
height: auto;
background: url(/images/s/key_visual_bg.jpg) center center no-repeat;
-webkit-background-size: 100% auto;
-moz-background-size: 100% auto;
background-size: 100% auto;
box-sizing: content-box;
}
}
#keyVisual video#video {
width: 100%;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
@media screen and (max-width: 1366px) {
#keyVisual video#video {
width: 1366px;
height: 768px;
}
}
@media screen and (max-width: 640px) {
#keyVisual video#video {
width: 100%;
display: none;
}
}
#keyVisual .title {
height: auto;
padding: 0;
margin: 0 0 0 -272.5px;
position: absolute;
left: 50%;
top: 188px;
}
@media screen and (max-width: 640px) {
#keyVisual .title {
width: 100%;
padding: 60% 3.125% 0;
margin: 0 auto 65%;
box-sizing: border-box;
position: static;
}
#keyVisual .title img {
width: 100%;
height: auto;
position: static;
}
}

DEMO

DEMOページリンク：【mp4/webmを使用】TOPページに動画を入れる

【補足】
動画は『ＮＨＫクリエイティブ・ライブラリー』のものを使用しています。
『ＮＨＫクリエイティブ・ライブラリー』の動画はMP4で配布されています。
動画形式をMP4からWEBMへ変換した際に使用したのは、下記サイトです。
MP4 を WEBMに変換します。オンラインで無料です