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. Pythonで作成したボットの実行結果をLINEに通知させる備忘…
  2. 0から作る光と影。箱の継ぎ目や奥行きにに影を落とし、ランプの上か…
  3. CSSグリッドレイアウトについて。flexboxより使いやすいが…
  4. 簡単に美しいマーブル模様をPhotoshop CCで作成する方法…
  5. Photoshopで対象物の色を変更する簡単な方法。
  6. Pythonの実行結果をGoogleスプレッドシートに出力してみ…
  7. LINEで郵便局の荷物追跡や再配達ができる!?
  8. マーケティングオートメーションの「Mautic」導入について

コメント

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

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

おすすめ記事

0から作る光と影。箱の継ぎ目や奥行きにに影を落とし、ランプの上から出ていく強めの光と下への光、左右はシェードからふんわりと。最後に色相調整して完了。 – from Instagram

投稿コメント0から作る光と影。箱の継ぎ目や奥行きにに影を落とし、ランプの上から出ていく強めの光と…

昼から夜のレタッチ。光の調整は、トーンカーブの明暗を分けてマスクしていく。夜は1枚目、昼(元画像)は2枚目。 – from Instagram

投稿コメント昼から夜のレタッチ。光の調整は、トーンカーブの明暗を分けてマスクしていく。夜は1枚目…

ファンタジーの世界。Photoshopでのレタッチ。6時間ぐらいかかった。ゴーレムは、植木鉢-2枚目で作っています。木々は全て素材画像から切抜き配置してる。これの元は、ニーアオートマタです。 – from Instagram

投稿コメントファンタジーの世界。Photoshopでのレタッチ。6時間ぐらいかかった。ゴーレムは…

メイクを落とすというレタッチ。

投稿コメントメイクを落とすというレタッチ。lifezakk Instagram…

オートレースのレタッチ。スタート前の集中をイメージ写真: @ryuko38 さん撮影

投稿コメントオートレースのレタッチ。スタート前の集中をイメージ写真: @ryuko38 さん撮影…

人気記事

  1. 城ドラ 新キャラ「サタン」敵を引き寄せるスキルと性能についてまとめ。
  2. エヴァ貞本氏がキャラデザの大型新作「Black rose suspects」シナリオにハマる!
  3. 三国FANTASY(ファンタジー)競技場 攻略のポイントについて
  4. バクダンおやじが城ドラに登場!新キャラの気になるスキル等についてまとめ
  5. 城ドラ キャラ能力バランス調整 8/31 一挙5体、デビルも上方修正だ!

インスタグラム

カテゴリー記事一覧

PAGE TOP