wordpressで作ったWEBサイトに訪問したときに時にポップアップでWELCOMEメッセージを表示するプラグイン『WordPress PopUp』で、メッセージではなくYouTubeプレイヤーをレスポンシブ対応で良い感じに表示させたい時の方法を考えてみたのでメモ。
まずは、プラグインをインストールして有効化、ダッシュボード左メニューから「PopUp」をクリックして設定画面へ行きます。
「Add New」で適当なタイトルをつけて準備します。
「Main PopUp Content」にテキストエィデタからiframeでYouTubeプレイヤーを設置します。
ビジュアルエディタからURL貼り付けだとサイズが出来ないのでテキストエィデタからです。
widthを”100%”に、heightを”500″（←お好みで調整）を入れます。
「Main PopUp Content」は、これ以外は空欄でOK。
下へ、「Appearence」の「No rounded corners」にチェック。（角丸をやめる）
それ以外はそのまま。
右「Behavior」もそのまま。
下「Displaying Conditions(optional)」の「Not from an internal link」をONにして、内部リンクからの時は表示させなくします。（初めて訪問した時のみ表示）
下「Custom CSS(optional)」に下記コードを入れます↓↓↓
.wdpu-385 .wdpu-text {
padding: 0;
margin:0;
}
.wdpu-385 .wdpu-msg {
padding: 0;
box-shadow:none;
}
iframe {
vertical-align: bottom;
}
@media screen and (max-width: 480px){
.wdpu-385 .wdpu-text,.wdpu-385.no-img .wdpu-text {
padding-top: 0px;
}
}「wdpu-385」の数字は人によって異なると思うので変更してください。
上記cssで、ポップアップの枠と陰、隙間をなくして、iframeの下に出来る隙間もなくして、かつレスポンシブ対応で、スマホで見たときに上部にできる隙間もなくす設定になります。
ポップアップでYouTubeプレイヤーとポップアップを閉じる「x」マークのみが表示するようになります↓↓↓
あとはお好みで調節してみてください。
参考までに♪
元シンガーソングライターで、メンズ美容ブログ、パンブログもやってます。たまにテレビに出てたりします。最近はTikTokも頑張ってます。
