![](https://cxg-design.jp/wp-content/uploads/2024/05/acfembed_thumb.png)
ACFのoEmbedで、レスポンシブ対応のYouTube動画を埋め込み
動画の埋め込みは、ブロックエディターや、ギャラリープラグインなど、色々な方法があります。今回は、ACFのoEmbedで、シングルテンプレートページや、トップページに、レスポンシブ対応のYouTube動画を埋め込む方法を紹介します。
ACF設定、コードは、Web制作時に行うもので、管理者は設定のみ行います。
今回のDEMOは、アクリスフィギュの動画を埋め込んでいます。
幅70%、最大幅1000px、で埋め込んでいます。SPでは最小幅360pxで表示されます。
ACF設定
新しくフィールドグループを作成し、フィールドタイプをoEmbedにします。編集画面に表示するフィールドラベル、PHPに記入するフィールド名を設定します。埋め込みサイズは空欄のままです。
![](https://cxg-design.jp/wp-content/uploads/2024/05/319c222de6f23dc8256dcdc3d5d19817.png)
フィールドタイプをoEmbedに。埋め込みサイズは空欄のまま
設定項目 | 設定値 |
---|---|
フィールドタイプ | oEmbed |
フィールドラベル | YouTube埋め込み |
フィールド名 | add_embed |
埋め込みサイズ | 空欄 |
コード
表示したいページのループ内に下記コードを挿入します。
<div class="embedbox">
<article class="embed-container">
<?php the_field('add_embed'); ?>
</article>
</div>
CSSでレスポンシブ対応の設定をします。
.embedbox{
width: 70%;
min-width: 360px;
max-width: 1000px;
margin: 0 auto;
}
.embed-container {
position: relative;
padding-bottom: 56.25%;
overflow: hidden;
max-width: 100%;
height: auto;
}
.embed-container iframe,
.embed-container object,
.embed-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
設置
設定したYouTubeフィールドグループとYouTube埋め込みフィールドが表示されます。URLを入力にYouTubeのURLを入力します。これで完成です。
![](https://cxg-design.jp/wp-content/uploads/2024/05/dc0342280254871dbdb2fb2a117b50a4.png)
URLを入力にYouTubeのURLを入力
以上で、今回の説明は終了です。場所を固定して表示したい場合に有効な機能で、シングルページだけでなく、トップページにも使えます。レスポンシブ対応にしているので、更新はYouTubeのURLを入力するだけで簡単に更新できます。
ACFは、多くのWordPressサイトで使用されているプラグインですが、PHPなどのプログラミング知識が必要です。しかし、様々なテンプレートページに柔軟に対応できる機能が揃っています。Webサイト作成のご依頼は、コンタクトフォームよりよろしくお願いします。