« スマホからの写真メモ with OCR | Home | movabletypeにSyntaxHighlighterを追加 »

Nov 202013

投稿済み記事内の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を生成するということ)

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

正規パターン

(<iframe .*src="http*://www.youtube.com.+</iframe>)

置換文字

$0

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

<$mt:EntryBody regex_replace="/(<iframe .* src=".*youtube.com.* .*</iframe>)/g",'<div class="videoBox">$1</div>' $>
<$mt:EntryMore regex_replace="/(<iframe .* src=".*youtube.com.* .*</iframe>)/g",'<div class="videoBox">$1</div>' $>

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

<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%;
}

参考ページ

追記: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

<$mt:EntryBody regex_replace="/(<iframe.*src=".*(vimeo.com|youtube.com).+</iframe>)/g",'<div class="videoBox">$1</div>' $>
<$mt:EntryMore regex_replace="/(<iframe.*src=".*(vimeo.com|youtube.com).+</iframe>)/g",'<div class="videoBox">$1</div>' $>

追記: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

<$mt:EntryBody regex_replace="/((<iframe.+src=".+(vimeo.com|youtube.com|instagram.com).+</iframe>)|<video.+><source.+></video>)/g",'<div class="videoBox">$1</div>' $>
<$mt:EntryMore regex_replace="/((<iframe.+src=".+(vimeo.com|youtube.com|instagram.com).+</iframe>)|<video.+><source.+></video>)/g",'<div class="videoBox">$1</div>' $>

3 Comments

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

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

Instrgram、Videoタグにも対応

Leave a comment

Search and Archives