WordPressでカスタムフィールドのYoutube動画埋め込みをレスポンシブ対応する方法
WordPressでYoutubeの動画を埋め込むと、iframeがレスポンシブ対応できておらず、スマートフォンで切れてしまう事があります。
記事本文（ <?php the_content(); ?>）の場合は、
寝ログ様で紹介されている「YouTubeなどで使われるiframe要素を、WordPressでレスポンシブ対応する方法」
という記事を参考にfunction.phpとCSSを編集することで対応できるのですが、カスタムフィールドに投稿した内容をレスポンシブ対応したい場合は、もう一手間加える必要があります。
function.phpに関数を追加
|
1 2 3 4 5 6 7 |
function convert_iframe($the_content) { if ( is_singular() ) { $the_content = preg_replace('/<iframe/i', '<div class="video"><iframe', $the_content); $the_content = preg_replace('/<\/iframe>/i', '</iframe></div>', $the_content); } return $the_content; } |
※ソースコードは、寝ログ様のものを参考にしました。
function.phpでiframeをdivで囲む関数を定義します。ここでは特にadd_filterしません。
記事出力側（single.php/page.phpなど）の設定
|
1 |
<?php echo convert_iframe(get_field("フィールド名")); ?> |
カスタムフィールドを出力する時に、一度先ほどの関数を通して変換します。その際はget_fieldを使ってください。the_fieldだと変換する前に出力されて、うまくいきません。
CSS側の設定
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
.video { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; } .video iframe, .video object, .video embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } |
※ソースコードは、寝ログ様のものを参考にしました。
