Tweet

Youtube の動画を記事に貼り付ける場合、該当する動画にあるリンクをコピペするわけだが、その際に動画のサイズを自由に設定できる。

YouTube 動画のブログへの取り込み方とサイズ変更 ブログパーツナビ Blogparts-NAVI
http://blog-parts-navi.seesaa.net/article/54679632.html

最近の動画は横幅 640px（縦横比 16:9）、480px（縦横比 4:3）と言った大型のものが主流になっており、通常のブラウザなら問題ないのだが、iPhone では横にはみ出してしまう。以前、「【MovableType】エントリーの中でタグを使う」で行った方法と同じように Javascript でいじる方法を試したのだが、これはうまくいかなかった。しょうがないので MT のプラグインでこれを実現してみる。

ResizeYoutube プラグイン

インストール

ダウンロード → resize_youtube.pl

resize_youtube.pl ファイルを mt/plugins に置くだけでインストールは完了だ。

使い方

MT のテンプレートで resize_youtube 属性の付いたタグを整形する。具体的には、テンプレート内で次のように指定する。

<$mt:EntryBody resize_youtube="1"$>
<$mt:EntryMore resize_youtube="1"$>

標準では動画の横幅を 300px、縦幅は縦横比が合うように自動で調整する。もし他のサイズに合わせたいならば引数に整数で指定する。

<!-- 横幅 200px の場合 -->
<$mt:EntryBody resize_youtube="200"$>
<$mt:EntryMore resize_youtube="200"$>

プラグインの書き方には Templatize プラグインの書式を参考にした。

エントリーやウェブページ内でMTタグが使えるプラグイン:Templatize | Movable Typeプラグイン | MTエンジニアブログ | スカイアークシステム
http://www.skyarc.co.jp/engineerblog/entry/3969.html

ResizeYoutube.pl

プラグインの内、実際にサイズの置換を行う部分は次のようになっている。単に <object> タグと <embed> タグのプロパティをいじっているだけなので、サイズをいじる範囲は Youtube のタグに限定しているわけではない。まあ、Youtube より大きなコンテンツを貼ることはないだろうからおそらく問題はないだろう。

MT::Template::Context->add_global_filter( resize_youtube => sub {
    my ( $raw_data, $arg, $ctx ) = @_;
    $arg or return $raw_data;
    my $max_width = $arg eq "1" ? 300 : $arg;

    $raw_data =~ s!
        (<(?:object|embed)[^>]+)
        width="(\d+)"\s*
        height="(\d+)"
    !
        my $tag = $1;
        my $w = $2;
        my $h = $3;
        if ( $w > $max_width ) {
            $h = int( $max_width * $h / $w );
            $w = $max_width;
        }
        qq|${tag}width="$w" height="$h"|;
    !gex;

    $raw_data;
} );