Movable TypeでYoutubeの動画を埋め込む

Movable TypeでYoutubeの動画を埋め込む方法です。

http://www.youtube.com/watch?v=GZ9m6-Q-ddoの動画を埋め込む場合、「埋め込みコード」をクリックして表示される下記のコードをコピーして貼り付ければ、ブログの記事に動画を埋め込むことができます。

<iframe width="560" height="315" src="http://www.youtube.com/embed/GZ9m6-Q-ddo" frameborder="0" allowfullscreen></iframe>

この方法だと、毎回コードをコピーして埋め込むのが、ちょっとだけ面倒です。また、ブログのスタイルを変更して、動画のサイズを変更したい時などには、検索や置換機能を使用する必要があるので、後々のメンテナンスのことを考えて、カスタムフィールドを使用して簡単に埋め込むことにしました。

youtube用のカスタムフィールドを下記のように新規作成します。
名前:youtube
種類:テキスト
必須:チェックなし
ベースネーム:youtube
テンプレートタグ:EntryDataYoutube

テンプレートのブログ記事に下記のコードを追加します。

<mt:If tag="EntryDataYoutube">
<div class="youtube"><iframe width="560" height="315" src="http://www.youtube.com/embed/<mt:EntryDataYoutube>?rel=0" frameborder="0" allowfullscreen></iframe></div>
</mt:If>

埋め込みをしたい動画のURL(http://www.youtube.com/watch?v=GZ9m6-Q-ddo)の?v=以降にあるGZ9m6-Q-ddoをカスタムフィールドに入力すると、動画の埋め込みが完了します。

動画のサイズを変更したい場合は、ブログ記事に追加したコードのwidthとheightを修正し、再構築すれば完了します。

【PR】 スマホやTV、PCで、いつでも映画や海外ドラマを見れる!今すぐ無料視聴!