YouTubeをはじめ様々な動画サイトの貼り付けコードは、そのまま貼り付けるとサイズ調整されずに、レスポンシブレイアウトが壊れてしまう場合があります。レスポンシブサイトに最適化させるには、cssでコンテナを作りwidthをピクセル指定からパーセント指定にしてやります。

以前紹介したFitVids.JSを使う方法（とコンテナを使う方法）では、実質、YouTubeの貼り付けコードのみに対応していましたが、iframe以外にobjectやembedにも対応させることで、幅広い貼り付けコードをレスポンシブサイトの表示を崩さずに貼り付けることができます。

やり方は同じで、cssに以下の要素を追加して、貼り付けコードを <div class=”video-container”> で囲むだけです。

CSS

paddingは状況によって変更するか無くても良い。

.video-container {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%;
padding-top: 30px;
overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

HTML

<div class="video-container">
動画の貼り付けコード
</div>

囲むdivタグは、WordPressならAddQuicktagを使って、エディターに<div class=”video-container”> </div>を挿入するボタンを追加するか、MacアプリのMarsEditなら、編集画面で 右クリック > Format > Custmize からマクロを登録すると入力が捗ります。

その他、IMEに辞書登録したりEvernoteなどにメモっておく手もあります。

Source: CSS: Elastic Videos

Via: prasm