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

【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プレイヤーを 表示する方法

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

参考までに♪

この後に読まれている記事は?


Amazon.co.jpで人気の『wordpress』関連商品はこちら↓↓↓

この後に読まれている記事は?

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

This blog is kept spam free by WP-SpamFree.