youtubeをlightboxでポップアップさせるワードプレスプラグイン【WP Video Lightbox】
目次
WP Video Lightboxのインストール
WP Video Lightboxはyoutubeを手軽にlightboxでポップアップさせるワードプレスのプラグインです。
まずはインストール⇒有効化しましょう！
管理画面側で特別な設定は必要なし！
プラグインを有効化したら、管理画面での設定は特に必要ありません！
あとは記事に以下のショートコードを張り付けるだけです。
ショートコードの貼り付け
以下のショートコードを張り付け、video_idにはyoutubeのURLリンクのIDを入力。
anchorにはサムネイルとなる画像のURLを入力します。
ライトボックスで表示されるサイズの調整は、widthとheightにそれぞれサイズを入力してください。
|
1 |
[video_lightbox_youtube video_id="youtubeのURLのID" width="640" height="480" anchor="サムネイル画像のURL"] |
◆一例◆
|
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コードを使えば表示できます。
|
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;を使います。
指定した高さと幅のサイズからトリミングを行ってくれます。
|
1 2 3 4 5 6 |
.thumbnail{ width: 540px; height: 304px; box-shadow: 0 12px 25px -12px #444; object-fit: cover; } |
スマホバージョンで表示するためcssでレスポンシブ調整
スマホバージョンの場合は、スマホcssに以下のコードを入れるといいかもです。
|
1 2 3 4 5 6 |
#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に影響が出るなんて言われたりするので、とりあえずその危険回避のためにやりました。他にいい方法があれば教えてください～
関連記事
-
2022.05.09 Xサーバーメールアドレスの追加方法 -
2020.10.07 ブラウザの縦幅サイズいっぱい表示、その中央に画像などのコンテンツを置く方法 -
2018.11.15 firefoxのバージョンとfirebugの互換性 -
2022.06.24 XサーバーをSSL化した後にリダイレクトさせる方法
-
2023.05.22 Advanced Custom Fieldsの画像フィールドの使い方と応用方法 -
2018.10.27 デザインセンスの良いフリー画像
