【wordpress】訪問時にポップアップで YouTubeプレイヤーを 表示する方法

wordpressで作ったWEBサイトに訪問したときに時にポップアップでWELCOMEメッセージを表示するプラグイン『WordPress PopUp』で、メッセージではなくYouTubeプレイヤーをレスポンシブ対応で良い感じに表示させたい時の方法を考えてみたのでメモ。

参考:WordPress PopUp

まずは、プラグインをインストールして有効化、ダッシュボード左メニューから「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」マークのみが表示するようになります↓↓↓

【wordpress】訪問時にポップアップで YouTubeプレイヤーを 表示する方法

あとはお好みで調節してみてください。

参考までに♪

\ SHARE /