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

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

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

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

()

置換文字

$0

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

<$mt:EntryBody regex_replace="/()/g",'
$1
' $>

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

あとは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

置換対象

regex_replace

<$mt:EntryBody regex_replace="/()/g",'
$1
' $>
<$mt:EntryMore regex_replace="/()/g",'
$1
' $>

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

置換対象（3パターン）

regex_replace

<$mt:EntryBody regex_replace="/(()|)/g",'
$1
' $>
<$mt:EntryMore regex_replace="/(()|)/g",'
$1
' $>