カスタムフィールド youtube

新着

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

プラグイン

2018/08/30

youtube

<?php if( get_field('youtube_url') ){ ?>
 
<div class="youtube">
    <?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

CSSでレスポンシブ対応。YouTube動画のベストの比率は16:9。

.youtube {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}

.youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}

.youtube {

position: relative;

width: 100%;

padding-top: 56.25%;

}

.youtube iframe {

position: absolute;

top: 0;

right: 0;

width: 100% !important;

height: 100% !important;

}

リピート

<ul class="list-2-column">
    <?php if(have_rows('video_field')): ?>
      <?php while(have_rows('video_field')): the_row(); ?>
        <li>
          <div class="youtube">
            <?php echo $embed_code = wp_oembed_get( get_sub_field('video-youtube') ); ?>
          </div>
          <p class="phot-disc"><?php the_sub_field('video-text'); ?></p>
        </li>
      <?php endwhile; ?>
    <?php endif; ?>
  </ul>

<?php if(have_rows('video_field')): ?>

<?php while(have_rows('video_field')): the_row(); ?>

<li>

<?php echo $embed_code = wp_oembed_get( get_sub_field('video-youtube') ); ?>

</div>

</li>

<?php endwhile; ?>

<?php endif; ?>

</ul>

フィールドタイプは「テキスト」