YouTubeをレスポンシブでポップアップさせるプラグイン「Easy FancyBox」wordpress

23.03.15

1 「Easy FancyBox」のver.1.8.18を手動でダウンロードします。
2 設定方法
3 htmlを入力します。
4 cssで整えます。
5 まとめ

「Easy FancyBox」のver.1.8.18を手動でダウンロードします。

1.9以降の新しいバージョン(2023/03/15時点)では不具合なのか、自分のテーマには作動しないサイトもありました。（泣）なので、古いバージョンで動作確認済みのver.1.8.18をダウンロードします。もちろん、最新バージョンで動く場合もあるので、動かない場合はダウングレードしたプラグインを検討するのもいいかもしれません。

一応プラグインの公式からダウンロードしたものを張り付けます。
easy-fancybox.1.8.18
ダウンロード・インストールしたら「Easy FancyBox」を有効化しましょう。

設定方法

管理画面の設定⇒メディアへ行くと、Easy FancyBoxの項目が追加されています。そこの一番上の項目に「youtube」があるのでチェックを入れて保存します。
あとは特に変更しなくても良いです。

htmlを入力します。

aタグにクラスで「fancybox-youtube」と入れた箇所はyoutubeの動画がポップアップされるようになります。

<a class="fancybox-youtube" href="https://www.youtube.com/watch?v=9-uVRTok-Bg">
    <img src="https://img.youtube.com/vi/9-uVRTok-Bg/hqdefault.jpg" alt="<?php bloginfo( 'name' ); ?>" class="youtube_img">
    <img src="<?php bloginfo('template_directory'); ?>/image/youtube_play.png" class="youtube_play">
  </a>

<img src="https://img.youtube.com/vi/9-uVRTok-Bg/hqdefault.jpg" alt="<?php bloginfo( 'name' ); ?>" class="youtube_img">

<img src="<?php bloginfo('template_directory'); ?>/image/youtube_play.png" class="youtube_play">

</a>

画像が2枚ありますが、１番目はサムネイルです。youyubeのサムネイルが自動で検出されます。2番目はプレイボタンを入れました。プレイボタンはデフォルトには、ないので、自作をしました。以下はプレイボタンの画像です。

このプレイボタンがサムネイルの真ん中に来るように、cssで整えます。

cssで整えます。

プレイボタンを真ん中に整えましょう。他に幅や高さも調整します。以下は参考です。
PCもスマホも基本中身はあまり変わらないですが、参考にしてください。

PCバージョン

.youtube_img{
width: 400px;
height: 250px;
box-shadow: 0 12px 25px -12px #444;
object-fit: cover;
}
.youtube_play{
position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
width: 75px;
}
.fancybox-youtube{
	position:relative;
	display: block;
}

.youtube_img{

width: 400px;

height: 250px;

box-shadow: 0 12px 25px -12px #444;

object-fit: cover;

}

.youtube_play{

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

-webkit-transform: translate(-50%, -50%);

-ms-transform: translate(-50%, -50%);

width: 75px;

}

.fancybox-youtube{

position:relative;

display: block;

}

スマホバージョン

.youtube_img{
width: 80%;
height: auto;
box-shadow: 0 12px 25px -12px #444;
object-fit: cover;
margin: 0 auto;
display: block;
}
.youtube_play{
position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
width: 75px;
}
.fancybox-youtube{
	position:relative;
	display: block;
	}

.youtube_img{

width: 80%;

height: auto;

box-shadow: 0 12px 25px -12px #444;

object-fit: cover;

margin: 0 auto;

display: block;

}

.youtube_play{

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

-webkit-transform: translate(-50%, -50%);

-ms-transform: translate(-50%, -50%);

width: 75px;

}

.fancybox-youtube{

position:relative;

display: block;

}

まとめ

前回に紹介したWP Video Lightboxでも同様の表現ができるのですが、プレイボタンが設置できないのと、レスポンシブが自動でできないため、こちらの方がやりやすいかもしれません。私はグレードをダウンしないと使えなかったことを知らずに、わざわざ他のプラグインを試しまくってました（泣）これならやりやすいです。