投稿済み記事内のyoutube動画をスマホ幅に合わせて表示

CSSの設定など大枠はYoutubeやHTML5video等の埋め込み動画のサイズをwindow幅に合わせて動的にリサイズ/可変にする方法 ｜ HTML5 – CSS3 magを参考に。
ここではMovable Typeでのタグの置換方法について。
記事内に埋め込まれているタグは

<iframe width="519" height="264" src="http://www.youtube.com/embed/uFoe0kcKGFg" frameborder="0" allowfullscreen></iframe>

な感じ。これをサイズ制御用のdivで囲む必要がある。
Movable Type管理画面の検索|置換では検索しか正規表現が使えないため、WordPressの様に記事自体の変更はできないが、グローバルモディファイアとしてregex_replaceというのがあるのでそれを利用する。
（つまりビルド時に置換処理を行ってHTMLを生成するということ）

で、通常の正規表現だと正規パターンはこんな感じ。
正規パターン

置換文字

$0

ただ実際やってみところ、マッチ文字参照は$0ではなく$1になるらしい。
ということで、Entry、Entry Summaryのテンプレート内のmt:EntryBody、mt:EntryMoreを以下のように変更。

ビルドすると以下の内容でページがビルドされる。

<div class="videoBox"><iframe width="519" height="352" src="http://www.youtube.com/embed/ZgS_gJjMHpQ" frameborder="0" allowfullscreen></iframe></div>

あとはCSSに以下の定義を追加して終わり。

.videoBox {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
clear:both;
}
.videoBox iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

参考ページ

• MovableType.org – Documentation: regex_replace
• regex_replaceを安全簡潔に書く小技 – エンジニアブログ – スカイアーク
• テンプレートタグリファレンス | MovableType.jp

追記：Vimeoも対応するように変更 / 2013.11.25

置換対象

<iframe src="http://player.vimeo.com/video/54967505?portrait=0" width="520" height="300" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

regex_replace

追記：Instrgram、Videoタグも対応するように変更 / 2013.11.25

置換対象（3パターン）

<video controls name="media" width="500" height="500"><source src="http://distilleryvesper1-1.ak.instagram.com/6edf566a01b511e392b622000a1fb73b_101.mp4" type="video/mp4"></video>
<iframe src="//instagram.com/p/diT4O7P2nQ/embed/" width="520" height="520" frameborder="0" scrolling="no" allowtransparency="true"></iframe>
<video controls name="media" width="500" height="500"><source src="http://distilleryvesper8-8.ak.instagram.com/871685dc0f7511e395bf22000a9f390a_101.mp4" type="video/mp4"></video>

regex_replace