ヘッダー画像を動画等に差し替えたい

とても簡単に実装できますが、現在どういう状態になっているかを教えてもらう必要があります。
例えばサイトロゴはどうなっているか、またモバイルの時はどうするか(モバイルメニュー、メニューボタン)、フォローボタンはどうしているか等ヘッダの状況が必要です。

また、動画をヘッダに持ってくることで、ヘッダは常に表示されている部分ですから表示が重くなると言う副産物があると言うこともお忘れなきよう。

更に一番重要なのが、その動画は自前の動画か、あるいはyoutube等から取得するかなどの情報も必要です。

ヘッダの状態に関しては、スキンをMonokaiにしてサイトロゴはカスタマイズ項目にてヘッダーの高さpxを変更して画像を設定、ヘッダー内に検索窓を設けただけで他に手を加えた部分はありません。
また、モバイルからのアクセスを前提としていない趣旨なので、そちらの設定は特に施していません。
使用する動画についてはwp-content内にmp4を置き、videoタグで再生することを考えております。

情報足らずだと更に手間をお掛けすることと思いますので、サイトURLを記載しておきます。
どうぞよろしくお願いします。

http://www.ice-military.com/

動画のパスがわかるように、テストページにその動画を埋め込むか、wp-contentなら8月フォルダ、あるいは何かしらわかるフォルダにアップロードしてもらって調べられるようにしてもらえると助かります。

お手数をおかけします。
テストページ http://www.ice-military.com/test-page を作成しました。
当該ファイルは http://www.ice-military.com/wp-content/uploads/movie/header-test.mp4 となります。
よろしくお願いします。

サンプル: アスペクト比固定でヘッダを動画に(videoタグ) | codepen

サンプルでは、jQueryで動画を挿入していますが、よくよく見るとサーチフォーム等ご自身で手を入れられているようなので、それじゃついでにvideoタグも#header-inに手動で入れても良いです。
その際は以下のようなタグを#header-inの先頭に入れてください。
※ jQueryは表示までに時間が少しかかるので、header.phpに書けるならそうしたほうが良いです
※ header.php等に書かれる場合はアップデートでカスタマイズ部分が上書きされてなくなるのでアップデートのたびに修正する必要があります。

<div class="header-video">
  <video autoplay loop>
    <source src="http://www.ice-military.com/wp-content/uploads/movie/header-test.mp4">
  </video>
</div>

souceタグ部分の動画アドレスを変更すれば別の動画に変更することができます。うちのfirefoxはmp4でも再生できましたが場合によってはmp4は動作しないかもしれません。webmならたいてい(IEは知りませんが)イケると思うので、webmでも作っておくとよいかと思います。

<video>
  <source src="動画のパス.webm" type="video/webm">
  <source src="動画のパス.mp4" type="video/mp4">
</video>

本来このように書いておくのが正しいようです。

で、今まではサーチフォームは、

<div id="h-top">
  <div class="alignright searchform"></div>
</div>

このような形で#h-topに入れられていたと思いますが、これを.searchformと修正して#header-inの最後に入れてください。イメージとしては、

#header
  #header-in
    .header-video
      video
    #h-top
      .alignleft
      .alignright
    .searchform

このような感じです。

サンプルのcss欄は、オリジナル(親テーマstyle.css)の不要なプロパティの初期化だけではなく、現、子テーマstyle.cssの不要なものを含めて初期化していますので、これら初期化しているプロパティで子テーマのこれまでの記述を削除すれば不要になるものも出てくるかと思います。
その場合はcss欄のscssを下向き三角ボタンからview compiledでcssに変換したものを、これまでの子テーマのstyle.cssの最後に追記した後、デベロッパーツールで確認して、以前の古いもの(取り消し線の入っているプロパティ)で、子テーマstryle.cssに記載してあるものは消しても大丈夫です。
つまり、追記したものより上にある重複した記述ですね。

またいくらレスポンシブ化してあるとはいえ、スマホサイズになったら重なる部分は出てきます。例えばサーチフォームとフォローボタンなど。
これらは用途に合わせてメディアクエリ等を利用してスマホ時等は非表示とすれば問題ありません。まぁPCでの閲覧のみと言うことですが。

jQuery部分は、いわゆるhtml内にvideoタグを入れるために書いてあるだけですので(html部分を探すのが面倒だろうと言うことから)、これらは本番環境では不要です。

分かりやすい解説ありがとうございます！
無事に設定できましたので、wembファイルを作って差し替えようと思います。

本当にありがとうございました✧*｡٩(ˊωˋ*)و✧*｡

> wembファイルを作って差し替えようと思います。

あ、違うんです。フォールバックと言うか、再生できなかった時のために用意するようなもので、より多くの端末で再生できるようにするためのものです。よって例のようにmp4とwebmと2つ書いておけばよいわけです。

詳細はこちら

つまりは、ブラウザのサポートの有無、もしくは本来再生はできるけれども別途codecが必要とか、なんかそういうので再生できない場合があったりするので、できるだけ再生できるような環境を多く作るためと言うことですね。

あ、なるほど。追加しておくだけで良かったのですね。
ありがとうございます！