メインビジュアルにYouTube動画を表示する方法

以下の手順でパターンを作成します。

WordPress「パターン」機能の活用法

「WordPressのパターン機能の使い方」を解説。パターンの作成・登録方法やGutenbergエディターでの再利用、Cocoon独自のpatternショートコードで複雑なレイアウトを呼び出す方法、同期パターンの解除について分かりやすく紹介します。

chuya.s239.xrea.com

1. パターンには「カバー」ブロックを配置します。
2. メディアを追加を選択します。
3. 「URLから動画を埋め込む」を選択します。

4. 動画URLにYouTubeの埋め込みコードを貼り付けます。

5. 「カバー」ブロックのスタイルパネルにある「オーバーレイの不透明度」を0%に設定します。

6. 「カスタムHTML」ブロックのCSSに以下のコードを追加します。

.hvn-header .wp-block-cover {
  height: 100vh;
  width: 100vw;
}

表2にメインビジュアルの設定をします。