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;
}
該当箇所で設定した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>
0 likes