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

公開日: : クリエイティブ , , ,

yotuube_iframe

さてさて。先日書いた通り4年目は意識してアウトプットしていきたいということで、タイトル通りですが、YouTubeの埋め込み(iframe)動画を、ウィンドウいっぱい、かつ中央配置したい、という要望があり、jQueryを使ってで実装できましたので備忘録です。

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)にするというものです。

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

関連記事

考察:MacBook Proの画面解像度が2880×1800ピクセルに?

2012年の第2期に画面解像度が2880x1800ピクセルになったMacBook Proが発売され

記事を読む

Web(ウェブ)とは何か、を改めて考えてみる。

未確定ですが、今年の秋頃から専門スクールで高校3年生相手にウェブサイト制作に関する授業を受け

記事を読む

EC-CUBE 2.12系で商品情報の項目を追加する

ここ最近でEC-CUBEのテーマ編集と若干のカスタマイズをしたのでメモです。自分はデザイン寄りな

記事を読む

androidでスクロール(フリック)できないバグ

最近スマートフォン対応作業が増えてきて、PCと同じ感覚で作ってると上手くいかない事がままあります

記事を読む

Google Search Consoleでサイト確認ができない場合の対処法

少し前にとある相談を受けた時のトラブルだったんですが、Google Search Conso

記事を読む

Message

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

CAPTCHA


Copyright Design Office majili All Rights Reserved.