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. Photoshop CC 導入。バナー作成時に楽する複数アートボ…
  2. 合成する時のトーン調整レタッチ
  3. facebookのいいねボタンに5種類の感情ボタンが出現!
  4. GoProMAX等で撮影した360度写真をPhotoshopで簡…
  5. Photoshopで対象物の色を変更する簡単な方法。
  6. マーケティングオートメーションの「Mautic」導入について
  7. テーブルの見出しを固定できるjsがとても便利。
  8. 企業WEB担当者向け。ホームページにエクセルの表組みを綺麗に掲載…

コメント

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

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

おすすめ記事

Photoshopの「空の置き換え」について、どれだけラクになるか体感。私がよく使う現在の手順はコレ①選択範囲を作成②「選択とマスク」で微調整しマスク③空の画像を配置④色調補正「カラーの適用」でトーン調整これがワンタッチに。トーン調整が付いてるのがヤバイ。進化がはやいなぁ、sensei。 – フォトレタッチ

投稿コメントPhotoshopの「空の置き換え」について、どれだけラクになるか体感。私がよく使う…

四国 日の出。 – フォトレタッチ

投稿コメント四国 日の出。rezakk399 Instagram…

change hair color.Photoshop での髪色変更のレタッチです。黒髪からブロンド、赤へカラーチェンジをしてます。ノイズが出ないように、自然なレタッチになります。 – フォトレタッチ

投稿コメントchange hair color.Photoshop での髪色変更のレタッチです。…

カミナリ@ – from Instagram

投稿コメントカミナリ#カミナリを撮ってみました。現像で黒い部分を暗くしたりして雷光をキワだしてる…

カワウ – from Instagram

投稿コメントカワウrezakk399 Instagram…

人気記事

  1. 黒騎士と白の魔王 ギルドバトルの基本とルールについてまとめ
  2. 写真合成のレタッチ。 – from Instagram
  3. 日本の夏。 – from Instagram
  4. 小さなけもの道。 – from Instagram
  5. 花。 – from Instagram

インスタグラム

This error message is only visible to WordPress admins

Error: There is no connected account for the user 8694609815 Feed will not update.

カテゴリー記事一覧

PAGE TOP