Colorbox 動画再生 レスポンシブ

情報を追記している場合はありますが、古い情報を訂正はしていませんので、公開年月日を参照してください。プラグイン・タグ、いずれもワードプレス・PHPのバージョン等によって動作しない場合もあります。

最近、どんな場合も使えるモーダルウィンドウのプラグインが見つからないのでColorbox – a jQuery lightbox をつけている。

画像リンクは maxWidth:’90%’,maxHeight:’90%’ をつけることで、モバイルでもはみ出さないが、動画をURLにリンクする形で開く場合、レスポンシブの設定が難しいので、インライン要素でアイフレームを囲う要素にレスポンシブのスタイルをつけ、スクリプトはwp_is_mobile とそれ以外で分岐すると、きれいに開ける。

*画像の場合も開く画像サイズが大きい場合は分岐したほうが良いかもしれない。