戯れ言葉

スマホ対応のレスポンシブ Youtubeの横幅を可変に

カテゴリ:レスポンシブ
タグ:

スマホ対応のレスポンシブで、今度はYoutube の貼付けも、どうにかしなくてはいけなくなりました。

そこはさすがにネット社会。捜してみると色々出てくるものです。

例によってセンター表示も可能にする為に私がとった方法は次の通りです。

まず、CSS で次の様に定義しておきます。

殆どパクリです。

最下段の提供記事を参照してください。


.iframeObj {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}

.iframeObj iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/*---- センター表示の場合 ----*/
.iframe-wrapper-cent {
  width: 500px;
  margin: 0 auto;
  max-width: 100%;
}

/*---- 左寄せ(通常)表示 ----*/
.iframe-wrapper {
  width: 500px;
  max-width: 100%;
}

いずれも貼付けられた Youtube の画像の横幅は最大時 500px になります。

記事中のHTML は


<div class="iframe-wrapper-cent">
  <div class="iframeObj">
    <iframe ・・・・・・・・ ここに貼付けたYoutube の本体・・・・・・・・>
    </iframe>
  </div>
</div>

の様に二重の <div> タグで囲みます。

外側の <div> タグがみそです。

CSS で設定した横幅より狭くする時は、


<div class="iframe-wrapper-cent" style="width: 360px;">

と、こちらに幅だけを指定します。

これは、ftvlog 様の [HTML] Youtubeの埋め込み動画の幅をウィンドウに合わせる の記事を参考にさせて頂きました。

こうしておかないとスマホで見た時に、YouTubeの枠がスマホからはみ出して、スマホからの閲覧者はめっちゃ鬱陶しくなります。

追記:2017 12 29
使用中のテンプレートに、動画用のCSSが標準で付いてました。

Comments 0

There are no comments yet.

Leave a reply
コメントをどうぞ

ブログやホームページのURLをどうぞ

パスワードを入力すると投稿後、訂正・削除が出来ます