@its_kanri

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

WordPressカスタム投稿でのYoutube埋め込み

解決したいこと

カスタム投稿でACFを使用しています。
そこで、埋め込みフィールドを使ってYouTubeのURLを入力すると
YouTubeの埋め込み表示をさせたいです。

発生している問題

<div class="VideoWrapper">
    <a href="https://www.youtube.com/watch?v=〇〇">https://www.youtube.com/watch?v=〇〇</a>
</div>
.VideoWrapper {
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 56.25%;
    overflow: hidden;
    margin-top: 30px;
    margin-bottom: 30px;
}

ブラウザ画面
スクリーンショット 2023-10-27 134614.png

該当箇所で設定したCSSのサイズで空白になっています。

該当するソースコード

<div class="works-page__container container">
    <aside class="common__lineup">
      <div class="common__lineup-inner">
        <p class="common__lineup-title">
          <span></span>
          カテゴリ
        </p>
        <?php
        $taxonomy = 'works-category'; // カスタムタクソノミーの名前
        $terms = get_terms($taxonomy);

        if (!empty($terms)) {
          echo '<ul class="common__lineup-list">';
          foreach ($terms as $term) {
            echo '<li class="common__lineup-item"><a href="' . get_term_link($term) . '">' . $term->name . '</a></li>';
          }
          echo '</ul>';
        } else {
          echo 'カテゴリーが見つかりません。';
        }
        ?>
      </div>
    </aside>
    <article class="works-article">
      <h2 class="works-article__name"><?php echo get_the_title(); ?></h2>
      <div class="works-article__container">
        <div class="works-article__inner">
          <ul class="works-article__gallery">
            <li class="works-article__image">
              <img src="<?php the_field('works1'); ?>" alt="" />
            </li>
            <li class="works-article__image">
              <img src="<?php the_field('works2'); ?>" alt="" />
            </li>
            <li class="works-article__image">
              <img src="<?php the_field('works3'); ?>" alt="" />
            </li>
            <li class="works-article__image">
              <img src="<?php the_field('works4'); ?>" alt="" />
            </li>
          </ul>
          <ul class="works-article__select">
            <li class="works-article__image">
              <img src="<?php the_field('works1'); ?>" alt="" />
            </li>
            <li class="works-article__image">
              <img src="<?php the_field('works2'); ?>" alt="" />
            </li>
            <li class="works-article__image">
              <img src="<?php the_field('works3'); ?>" alt="" />
            </li>
            <li class="works-article__image">
              <img src="<?php the_field('works4'); ?>" alt="" />
            </li>
          </ul>
        </div>
        <div class="works-article__content">
          <dl class="works-article__list">
            <div class="works-article__item">
              <dt>納入先</dt>
              <dd><?php the_field('delivery'); ?></dd>
            </div>
            <div class="works-article__item">
              <dt>納入年</dt>
              <dd><?php
                  // 現在の投稿の投稿日を取得
                  $post_date = get_the_time();

                  // 年を取得
                  $post_year = date('Y', strtotime($post_date));

                  // 年を表示
                  echo $post_year;
                  ?></dd>
            </div>
            <div class="works-article__item">
              <dt>搬送物</dt>
              <dd><?php the_field('cargo'); ?></dd>
            </div>
            <div class="works-article__item">
              <dt>温度環境</dt>
              <dd><?php the_field('temperature'); ?></dd>
            </div>
            <div class="works-article__item">
              <dt>用途</dt>
              <dd>
                <?php the_field('text'); ?>
              </dd>
            </div>
          </dl>
        </div>
      </div>
      <div class="VideoWrapper">
        <?php the_field('youtube_url'); ?>
      </div>
    </article>
  </div>

カスタム投稿画面
スクリーンショット 2023-10-27 134138.png

ACF設定
スクリーンショット 2023-10-27 135242.png

0 likes

1Answer

aタグではマウスクリックが必要です。スタイルシートはアニメーション以外の動的なアクションは苦手分野では?

ACF以外のプラグインを代用するか?普通にiframeではだめですか?

0Like

Your answer might help someone💌