[WordPress General] WordPress に embed した YouTube や img をレスポンシブ対応する

width の変更に横幅(width)をあわせる。

画像

  • imgmax-width: 100% を追加。
  • .postArticle をつけておけばよいかな。

YouTube

  • YouTube の URL をエントリーに含めると、自動で embed される。
  • Jetpack の機能を有効化しておくと、.embed-youtube で囲まれた下記のタグが生成されるのでこれを利用する。
<span class="embed-youtube" style="text-align:center; display: block;"><iframe class="youtube-player" type="text/html" width="600" height="368" src="http://www.youtube.com/embed/orQbHXIVgi0?version=3&amp;rel=1&amp;fs=1&amp;autohide=2&amp;showsearch=0&amp;showinfo=1&amp;iv_load_policy=1&amp;wmode=transparent" allowfullscreen="true" style="border:0;"></iframe></span>

下記を参考にさせて頂きました。

.postArticle img {
  max-width: 100%;
  height: auto;
}
.embed-youtube {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.embed-youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

こちらに掲載されているとのこと。

現場でかならず使われているWordPressデザインのメソッド
エムディエヌコーポレーション(MdN) (2013-11-20)
売り上げランキング: 81,162

デザイン寄りの WordPress の本を1冊買おうかと考えているけれども、数が多くて困ってるので探してみよう。