マジリブログ

つらつら書いてます。

YouTube動画をモーダル時にウィンドウいっぱい&中央配置する。2022/05/03更新

yotuube_iframe

※バグってたので更新しました。

タイトル通りですが、YouTubeの埋め込み(iframe)動画を、ウィンドウいっぱい、かつ中央配置したい、という要望があり、jQueryを使ってで実装できましたので備忘録です。JavaScriptのみで実装し直しました。

youtubeの埋め込み自体は大抵の方はご存知の通り、動画ページの共有>埋め込みコードでiframeのタグが取得できますよね。それをソースに貼れば動画の埋め込み自体は完了ですが、最近ではクリックしたらモーダルウィンドウを出して、そこに動画を配置、ウィンドウサイズいっぱい動画を見せる。といったこともやりますよね。

その時にちょっと困ったのが、モーダルの閉じるボタンです。画面全体への動画設置+閉じるボタンを固定配置すると、ボタンが動画にかぶり続けてしまい、ちょっと嫌だなと感じたのです。単純に全面表示+閉じるボタン設置をするとこうなります。

サンプル1

動画再生時の右上のアイコンに閉じるボタンがかぶってしまっています。そこで多くの方が一度は使ったことがあると思いますが、YouTube動画のレスポンシブ対応。以下参照サイトです。

Youtube 動画の埋め込みをCSSでレスポンシブ対応する方法 – HAM MEDIA MEMO

こちらのcss対応はブログ等がレスポンシブ対応されている場合に有効な方法ですが、動画をウィンドウに対して100%表示に使うと、縦幅が横幅の56.25%未満になると動画がウィンドウ外にはみ出てしまいます。こんな感じで。

サンプル2

という事になったので、ウィンドウがどんなサイズでも画面中央かつ、縦横比率を維持した状態で動画が埋め込まれている状態にしたくなりました。実装したのはこんな感じです。

サンプル3

やっている事は大した事ではなく、ウィンドウの表示エリアの縦幅が横幅の56.25%以上の場合は、動画を囲むボックスの縦幅を表示エリアの横幅にし、縦幅を横幅の56.25%の数値に設定する。逆に、縦幅が横幅の56.25%未満の場合は、縦幅を表示エリア縦幅にし、横幅を縦幅の1.77…倍(計算上は横幅÷0.5625)にするというものです。

これであればウィンドウサイズがどうなってもウィンドウ中央に縦横比率を維持した状態で動画を埋め込めます。スクリプトは直書きしているので、気になる方はソースを見てください。