WordPressでカスタムフィールドを使ってYouTube動画を表示させる

新着

カテゴリ一覧
- wordpress
- google
- サーバー
- ドメイン
- sns
- プラグイン
- css
- Illustrator
- photoshop
- bootstrap
- その他

記事一覧

WordPressでカスタムフィールドを使ってYouTube動画を表示させる

2024/03/14

参考URL https://blanche-toile.com/web/wordpress-customfield-youtube

・フィールドタイプはテキストでOK

PHPで表示させるコードを書く

<?php if( get_field('youtube_url') ){ ?>
 
<div class="VideoWrapper">
  <?php echo $embed_code = wp_oembed_get( get_field('youtube_url') ); ?>
</div>
 
<?php } ?>

<?php if( get_field('youtube_url') ){ ?>

<?php echo $embed_code = wp_oembed_get( get_field('youtube_url') ); ?>

</div>

<?php } ?>

CSSでレスポンシブ対応

.VideoWrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  padding-top: 25px;
  height: 0;
}
 
.VideoWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.VideoWrapper {

position: relative;

padding-bottom: 56.25%; /* 16:9 */

padding-top: 25px;

height: 0;

}

.VideoWrapper iframe {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

}

「YouTube URL」のカスタムフィールドに埋め込むYouTube動画のURLを入れます。