[WordPress General] WordPress に embed した YouTube や img をレスポンシブ対応する
width の変更に横幅(width)をあわせる。
画像
img
にmax-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&rel=1&fs=1&autohide=2&showsearch=0&showinfo=1&iv_load_policy=1&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デザインのメソッド
posted with amazlet at 16.05.18
エムディエヌコーポレーション(MdN) (2013-11-20)
売り上げランキング: 81,162
売り上げランキング: 81,162
デザイン寄りの WordPress の本を1冊買おうかと考えているけれども、数が多くて困ってるので探してみよう。