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

lifezakk

投稿者の記事一覧

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

関連記事

  1. 合成する時のトーン調整レタッチ
  2. ヤフオクの商品説明を綺麗に!売上アップのポイント
  3. Pythonで作成したボットの実行結果をLINEに通知させる備忘…
  4. 企業WEB担当者向け。ホームページにエクセルの表組みを綺麗に掲載…
  5. facebookのいいねボタンに5種類の感情ボタンが出現!
  6. Photoshopの炎フィルターを使って簡単にテキストを炎文字に…
  7. マーケティングオートメーションの「Mautic」導入について
  8. マジックアワー α6400 – sigma 30mm f1.4

コメント

  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. 【おすすめアプリ】パチスロコードギアス 反逆のルルーシュR2「777NEXT」
  2. 黒騎士と白の魔王 新獄級ディアブロを攻略 攻撃パターンを覚えよう
  3. 事前予約10万人突破「エアリアルレジェンズ」豪華な特典が大量にゲットできるキャンペーンを実施中!
  4. NEXONの新作アプリ「OVERHIT」を毎日10時間プレイしてみた感想
  5. CSSグリッドレイアウトについて。flexboxより使いやすいが、問題はいつものアイツだな。

インスタグラム

This error message is only visible to WordPress admins
Error: There is no connected account for the user 8694609815.

カテゴリー記事一覧

PAGE TOP