カテゴリー
Develop

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

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


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


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

(

置換文字

$0

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

)/g",'
$1
' $> )/g",'
$1
' $>

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

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

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

参考ページ

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

置換対


regex_replace

)/g",'
$1
' $> )/g",'
$1
' $>

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

置換対象(3パターン)


regex_replace

)|)/g",'
$1
' $> )|)/g",'
$1
' $>

「投稿済み記事内のyoutube動画をスマホ幅に合わせて表示」への3件の返信

あ、SyntaxHighlighterが入ってない・・・orz

Vimeoにも対応するようにRegパターンを改変。
しかしまだInstagramとかのVideoタグ系も対応が必要そう・・・

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です