wordpress mp4などの動画をポップアップ再生できるプラグイン「Video PopUp」

23.04.29

1 動画再生プラグインVideo PopUp
2 ショートコードの書き方
3 ショートコードをPHPで書く場合
4 レスポンシブも自動対応

動画再生プラグインVideo PopUp

動画再生プラグインVideo PopUpの紹介です。まずはダウンロード⇒インストールしましょう。

ショートコードの書き方

有効化したら特にいじるところはありません。左メニューの「Video PopUp」から「shortcode Usage」に行くとショートコードの使い方が載っています。フルで使うなら、以下の通りです。

[video_popup url="" text="" title="" auto="" n="" p="" wrap="" rv="" w="" h="" co="" dc="" di="" img="" iv=""]

1	[video_popup url="" text="" title="" auto="" n="" p="" wrap="" rv="" w="" h="" co="" dc="" di="" img="" iv=""]

URLにmp4のリンクを入力し、imgにサムネイル画像のリンクを入力します。

ショートコードをPHPで書く場合

ショートコードをトップページなどにPHPで書く場合は以下でOKです。
最低限にURLとimgだけ入れれば、大丈夫です。

<?php echo do_shortcode('[video_popup url="https://aoyama-hoikuen.jp/wp-content/themes/true-light/mp4/video01.mp4" text="" title="" auto="" n="" p="" wrap="" rv="" w="" h="" co="" dc="" di="" img="https://aoyama-hoikuen.jp/wp-content/themes/true-light/images/video_img01.jpg" iv=""]'); ?>

1	<?php echo do_shortcode('[video_popup url="https://aoyama-hoikuen.jp/wp-content/themes/true-light/mp4/video01.mp4" text="" title="" auto="" n="" p="" wrap="" rv="" w="" h="" co="" dc="" di="" img="https://aoyama-hoikuen.jp/wp-content/themes/true-light/images/video_img01.jpg" iv=""]'); ?>

レスポンシブも自動対応

レスポンシブも自動対応で手軽です。背景色やサイズデザインの変更はプレミアム会員（課金）しないといけませんが、cssいじればなんとかなるかも。…ということで以下は該当箇所の参考cssです。これをcssに追加書き込みして変更しましょう。

/*背景の色変更*/
.YouTubePopUp-Wrap {
	position: fixed;
	width: 100%;
	height: 100%;
	background-color: #000;
	background-color: rgba(0,0,0,0.8);
	top: 0;
	left: 0;
	z-index: 2147483647;
}

/*縦横サイズ変更*/
.vp-flex {
  max-width: 800px;
  width: 100%;
  height: 450px;
  max-height: 90%;
  margin: 0 40px;
  position: relative;
  background-color: #000;
}

/*背景の色変更*/

.YouTubePopUp-Wrap {

position: fixed;

width: 100%;

height: 100%;

background-color: #000;

background-color: rgba(0,0,0,0.8);

top: 0;

left: 0;

z-index: 2147483647;

}

/*縦横サイズ変更*/

.vp-flex {

max-width: 800px;

width: 100%;

height: 450px;

max-height: 90%;

margin: 0 40px;

position: relative;

background-color: #000;

}

詳しくは以下のこのサイトを参考に。

お役に立てましたらadsenseクリックお願いします！

いかがでしたでしょうか？もしお役に立てましたら、お賽銭のつもりでadsenseをポチっとクリックお願いします！↓上手くいきますようにお祈りしておきます！

« Advanced Custom Fieldsの画像フィールドの使い方と応用方法

YouTubeをレスポンシブでポップアップさせるプラグイン「Easy FancyBox」wordpress »