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

<div class="video">
<iframe width="560" height="315" src="https://www.youtube.com/embed/XXXXXXXXXX?rel=0" frameborder="0" allowfullscreen></iframe>
</div>

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

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

.video {
    position: relative;
    padding: 30px 0 56.25%;
  height: 0;
    overflow: hidden;
}
.video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

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

 

lifezakk

投稿者の記事一覧

フリーランスのWEBデザイナー。日々WEB制作で気になるHtml CSS Photoshop illustrator や好きなアプリの備忘録をつけてます。カメラはレタッチで使う素材撮りや趣味レベルでやっています。

関連記事

  1. CSSグリッドレイアウトについて。flexboxより使いやすいが…
  2. Pythonの実行結果をGoogleスプレッドシートに出力してみ…
  3. LINEで郵便局の荷物追跡や再配達ができる!?
  4. Photoshopの炎フィルターを使って簡単にテキストを炎文字に…
  5. 簡単に美しいマーブル模様をPhotoshop CCで作成する方法…
  6. 合成する時のトーン調整レタッチ
  7. facebookのいいねボタンに5種類の感情ボタンが出現!
  8. 企業WEB担当者向け。ホームページにエクセルの表組みを綺麗に掲載…

コメント

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

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

CAPTCHA


おすすめ記事

SNOW.雪が降り、晴れて一夜経った朝、表面が少し凍った感じが1番好き。キラキラするんだよね。そこを踏むと中にはサラサラのパウダーが詰まってる。 – フォトレタッチ

投稿コメントSNOW.雪が降り、晴れて一夜経った朝、表面が少し凍った感じが1番好き。キラキラする…

ALLGREEN. – フォトレタッチ

投稿コメントALLGREEN.rezakk399 Instagram…

factory. – フォトレタッチ

投稿コメントfactory.rezakk399 Instagram…

雪のPhotoshop合成レタッチ。本日2/2にMdnからPhotoshop本を出版いたしました。初めての方でもレタッチが楽しめるよう解説した一冊です。電子書籍では試し読みもできます。プロフィールのリンク先を掲載してますので良かったらご覧ください。 – フォトレタッチ

投稿コメント雪のPhotoshop合成レタッチ。本日2/2にMdnからPhotoshop本を出版…

夕焼けシルエット。 – フォトレタッチ

投稿コメント夕焼けシルエット。rezakk399 Instagram…

人気記事

  1. マジックアワー α6400 – sigma 30mm f1.4
  2. 三国FANTASY(ファンタジー) 1日の効率的な流れについて
  3. Godetia. – from Instagram
  4. アナザーエデン 「FEAR フィアー」出現場所・背後の宝箱・ドロップアイテム等について
  5. 城ドラ トロールの使用感について!出しどころがポイント。

インスタグラム

このエラーメッセージは WordPress の管理者にだけ表示されます

エラー: フィードが見つかりません。

アカウントを接続するには、Instagram Feed の設定ページに移動してください。

カテゴリー記事一覧

PAGE TOP