wordpressでyoutubeの埋め込み

エネル原人　でyoutubeの埋め込みアーカイブページ

 

e-genjin-archive

 

Advanced Custom Fields の　oEmbed  を使ってyoutubeのURLを張り付ける

埋め込みサイズの入力欄で大きさを入力。

幅がでかいときにレスポンシブできるようにクラス名を　フィールド値に加える

 

html

<div class=”d-flex flex-wrap justify-content-around align-self-center”>
<?php if(have_posts()):
while(have_posts()): the_post(); ?>

<div class=”archiveContainer”>
div class=”youtubBox  movie-wrap“><?php the_field(‘youtube’); ?></div>

<div class=”housou text-center”><?php the_field(‘housoubi’); ?></div>

<div class=”genjinName text-center”><?php the_field(‘genjin’); ?></div>
</div>

<?php endwhile; endif; ?>
</div>

 

css   

.archiveContainer .movie-wrap {
position: relative;
padding-bottom: 56.25%; /*アスペクト比 16:9の場合の縦幅*/
height: 0;
overflow: hidden;
}

.archiveContainer .movie-wrap iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

 

因みにアーカイブ集にするためにコンテナのサイズ下記にしている

.archiveContainer {
width:45%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border: 1px solid #666666;
background-color: gold;

margin-right: 10px;
margin-left:10px;
margin-bottom: 40px; }

 

/*******************************************/
/*スマホ縦*/
@media (max-width: 479px){

.archiveContainer {
width:100%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border: 1px solid #666666;
background-color: gold;

margin-right: 10px;
margin-left:10px;
margin-bottom: 40px; }

}