クリエイティブ

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

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

-クリエイティブ
-, , ,

執筆者:


comment

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

CAPTCHA


関連記事

マウスのこだわり

Photoshop、Illustratorを使用しているクリエイターなら、 自分の手の用にカーソルを操作できるよう、 マウスにこだわりがある人は結構いる、と思います。 自分は結構、いや、かなりマウスに …

Mac for XAMPPでのローカル開発環境について。独自ドメイン設定も。

8ヶ月ぶりの更新となりました(汗 今年に入ってから先月末まで休みらしい休みも無く、家族を放ったらかしで仕事してたらこうなりました。さて、久しぶりの更新で何を書こうかなと思い、備忘録も兼ねて自分のローカ …

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

ここ最近でEC-CUBEのテーマ編集と若干のカスタマイズをしたのでメモです。自分はデザイン寄りなので、データベースはphpMyAdminの存在は知っている程度、phpやjsは自力では書けない、そんなレ …

Web制作に最強の開発ツール「Coda」が値下げ

会社で使用している開発ツール「Coda」が値下げされてました。 もしかしてメジャーアップデート前の値下げか!? と思って、販売元のパニック・ジャパンに、何で値下げしたん? ってメールで質問してみたら返 …

Google Adwords用Flashバナー(swf)の作り方

今までFlashでコンテンツを作る機会は多少ありましたが、Flashバナー、しかもGoogle Adwords用のバナーを作る機会は無く、先日初めて制作の機会を頂けたので、制作方法と注意点についての備 …

Copyright© ブログ|横浜・東京のホームページ・印刷物制作 マジリ , 2018 All Rights Reserved.