free web hit counter

CSS

YoutubeやUstreamの埋め込み動画をスマホ向けにレスポンシブ対応させてみよう。

こんにちはzakkです。エルニーニョのおかげで各スキー場に雪が積もらないため、クローズや一部滑走不可になってますねぇ。ここ17年間スノーボードをしにシーズン中は毎週雪山にいってますが、この時期にこんなことは初めてです。3月に雪がないとかはありましたけど、いま1月ですよ。。。でも今週もスキー場にいきますけどね。

今回の備忘録は、YoutubeやUstream,Vimeoなどを埋めこむ際に覚えておきたいレスポンシブを意識した埋め込み方法です。
これもテンプレートとしてもっておきたい万能タイプ。

Youtubeを埋めこむとき、あなたはスマートフォンを意識してますか?PC専用のHPなら問題ないですが、昨今スマホとHPはセットが必須となってきてます。
その際、WEBCMやイベント動画を公開する際にHPに埋め込み等しますよね、もちろんスマホ向けサイトにも設置すると思います。
いつものようにYoutubeから埋め込みコードを取得しコピペで貼り付けるとPC向けでは綺麗に表示されるけど、スマホ向けサイトでは幅がはみ出る事ありませんか?
スマホ向けサイトではみでるからiframeのサイズを変更したりして対応したりしてませんか?

今回のコードを覚えておけば簡単にレスポンシブ対応ができますので、是非ご活用ください。

埋め込み動画を幅いっぱいのレスポンシブ対応させよう。

まずDIVを用意し適当なクラス名を付与します。ここではクラス名videoとしてます。
※このTipsは、以下の記事を参考にしております。

Elastic Object & Iframe Embedded Videos (demo)The trick is very simple. You need to wrap the embed code with a container and specify 50% to 60% padding bottom. Then specify the child elements (iframe, object embed) 100% width, 100% height, with absolute position. This will force the embed elements to expand fullwidth automatically.

HTML

CSSでレスポンシブに対応させる。

続いてCSSです。注目はDIVのパディング値ですね、上に30px下に56.25%の余白を指定しております。この値はiframeのサイズからアスペクト比を算出しているようです。

これで完成です。簡単ですねぇ。

 

lifezakk

lifezakk

投稿者の記事一覧

フリーランスのWEBデザイナー。日々WEB制作で気になるHtml CSS Photoshop illustrator アプリの備忘録をつけてます。#OVERHIT や #ホウチ帝国 にハマってます★

関連記事

  1. ビックリマン風のキラキラシールをPhotoshopで作成してみる…
  2. table装飾時に持っておきたいベーステンプレートとなるCSS
  3. ヤフオクの商品説明を綺麗に!売上アップのポイント
  4. マーケティングオートメーションの「Mautic」導入について
  5. Photoshop CC 導入。バナー作成時に楽する複数アートボ…
  6. LINEで郵便局の荷物追跡や再配達ができる!?
  7. Googleマイマップでハマった「ズームアウトするとすべてのピン…
  8. 企業WEB担当者向け。ホームページにエクセルの表組みを綺麗に掲載…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

おすすめ記事

マーケティングオートメーションの「Mautic」導入について

マーケティングオートメーションの「Mautic」について、自社サーバーを利用したネットショップに導入…

OVERHIT(オーバーヒット) 「震天の神域 風の龍 ファフニール」が10月18日(木)START

前回の討伐戦の風BOSSは、「アラクネス」でしたが、今回は「震天の神域 風の龍 ファフニール」です。…

Photoshopの炎フィルターを使って簡単にテキストを炎文字にしてみる。

炎文字は、結構頻繁に使います。例えば、イベントやキャンペーンのポスターやバナー、アプリゲームでも使っ…

OVERHIT(オーバーヒット)光討伐「スフィンクス」登場。

2018/09/27 12時から光討伐「スフィンクス」が登場となります。これで全属性での討伐完了です…

OVERHIT(オーバーヒット) 闇属性レイドボス「獣の王」9月13日(木)登場!

久々の討伐戦です。レイドボスが闇属性なので、今まで通りの場合、闇属性の強力な武器防具やアクセサリーが…

人気記事

  1. 城ドラ チビクロプス登場!4コス2体召喚可能!
  2. 黒騎士と白の魔王 降臨イベント「ソロモンの悪魔」はまだ終わりではない?猫魔王ベレトとは!
  3. DQMJ3 クリア前中盤~後半に使える効率の良い経験値の稼ぎ方
  4. 城ドラ 2017/2/23 キャラ能力バランス調整 まとめ
  5. ホウチ帝国攻略 最初にやることや知っておくと効率的なTIPS まとめ

カテゴリー記事一覧

PAGE TOP