WordPress・トップページのヘッダーに動画を設定

最近増えたのが、トップページのヘッダーに動画を表示させるサイト。
例えばこちら。
https://himeji588.com/

こちらのサイトはTCDのテーマ「meets」を使っているので、テーマ内で設定が可能だが、これを他のテーマで設定してみる。

せっかくなので無料テーマ「Lightning」で設定する。※基本的にはどのテーマでもやり方は同じ。

まずは（トップページに設定した）固定ページのブロックエディターを編集する。

ブロックの項目から「カバーブロック」選択して、後は入れたい動画を挿入するだけ。

するとこのように動画が入りました。

これを画面いっぱいに広げるためにカバーのメニューから「配置」→「全幅」を選択。縦幅も調整できます。

ここまでが他のテーマでも共通の動画設定となります。

ここからは「Lightning」の設定になります。

「Lightning」だと、このままではヘッダーが残る。

TCDのテーマ「Switch」のようにヘッダーが表示される場合はこれでも良いが、今回は「meets」に近づけるため、ヘッダーも消すことにする。

そのためにはまず追加CSSに

.page-id-4 .siteHeader{
   display: none;
}

を記述する。

ここのID（page-id-4）は固定ページのIDとなります。

さらに上部の空白を消すために

.siteContent
	 {
  padding-top: 0px;
  margin-top: 0px;
}

を記述すればできあがり。

デモはこちら