youtubeをlightboxでポップアップさせるワードプレスプラグイン【WP Video Lightbox】

23.02.24

ウェブデザイン備忘録

1 WP Video Lightboxのインストール
2 管理画面側で特別な設定は必要なし！
3 ショートコードの貼り付け
4 トップページなど別のページに貼りたい場合は！
5 PCバージョンでcssを整える
6 スマホバージョンで表示するためcssでレスポンシブ調整
7 まとめ

WP Video Lightboxのインストール

WP Video Lightboxはyoutubeを手軽にlightboxでポップアップさせるワードプレスのプラグインです。
まずはインストール⇒有効化しましょう！

管理画面側で特別な設定は必要なし！

プラグインを有効化したら、管理画面での設定は特に必要ありません！
あとは記事に以下のショートコードを張り付けるだけです。

ショートコードの貼り付け

以下のショートコードを張り付け、video_idにはyoutubeのURLリンクのIDを入力。
anchorにはサムネイルとなる画像のURLを入力します。
ライトボックスで表示されるサイズの調整は、widthとheightにそれぞれサイズを入力してください。

[video_lightbox_youtube video_id="youtubeのURLのID" width="640" height="480" anchor="サムネイル画像のURL"]

1	[video_lightbox_youtube video_id="youtubeのURLのID" width="640" height="480" anchor="サムネイル画像のURL"]

◆一例◆

[video_lightbox_youtube video_id="wlCQiAMC3To" width="640" height="480" anchor="https://aoyama-yuki1.com/wp-content/themes/true-light/images/sei_youtube01.jpg"]

1	[video_lightbox_youtube video_id="wlCQiAMC3To" width="640" height="480" anchor="https://aoyama-yuki1.com/wp-content/themes/true-light/images/sei_youtube01.jpg"]

トップページなど別のページに貼りたい場合は！

トップ画面などに貼り付けたい場合はショートコードのphpコードを使えば表示できます。

<?php echo do_shortcode('[video_lightbox_youtube video_id="wlCQiAMC3To" width="640" height="480" anchor="https://aoyama-yuki1.com/wp-content/themes/true-light/images/sei_youtube01.jpg"]'); ?>

1	<?php echo do_shortcode('[video_lightbox_youtube video_id="wlCQiAMC3To" width="640" height="480" anchor="https://aoyama-yuki1.com/wp-content/themes/true-light/images/sei_youtube01.jpg"]'); ?>

PCバージョンでcssを整える

サムネイルを整える際に、ちょっとトリミングしてあげるといいかもです。
トリミングのcssはobject-fit: cover;を使います。
指定した高さと幅のサイズからトリミングを行ってくれます。

.thumbnail{
width: 540px;
height: 304px;
box-shadow: 0 12px 25px -12px #444;
object-fit: cover;
}

.thumbnail{

width: 540px;

height: 304px;

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

object-fit: cover;

}

スマホバージョンで表示するためcssでレスポンシブ調整

スマホバージョンの場合は、スマホcssに以下のコードを入れるといいかもです。

#pp_full_res iframe{
	width: 100%;
	}
div.pp_default .pp_content_container .pp_details {
	padding-bottom: 38px;
}

#pp_full_res iframe{

width: 100%;

}

div.pp_default .pp_content_container .pp_details {

padding-bottom: 38px;

}

#pp_full_res iframeはyoutubeの幅になります。横幅いっぱいにするならwidth100%を。
div.pp_default .pp_content_container .pp_detailsは、下に画面を消す×印がしっかり見えるように
padding-bottom: 38px;を追加しました。

このあたりはお好みで調整してください。

まとめ

いかがでしたでしょうか？youtubeをライトボックスで表示させるプラグインって、結構探したんですがいいのがないんですよね；；
あっても設定方法が、いまいちわからなかったり、うまく表示できなかったりと苦労しました。
このプラグインも理想的ではないんですが、iframeだと画面表示スピードが重くなってSEOに影響が出るなんて言われたりするので、とりあえずその危険回避のためにやりました。他にいい方法があれば教えてください～