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

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

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

<iframe width="560" height="315" src="https://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="https://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を修正し、再構築すれば完了します。

埋め込み動画ではなくサムネイル画像を表示してYouTubeの動画へリンクさせる方法。

YouTubeの埋め込み動画を複数貼ると、ページの表示完了までの時間が掛かったり、Google Search Consoleでのスコアが低くなったりします。サムネイル画像の表示であれば、imgタグのloading="lazy" decoding="async"による効果も期待できると思います。

下記のようなコードを記事テンプレートに追加すると実現可能です。

<MTIf tag="EntryDataYoutube_1"><div><a href="https://www.youtube.com/embed/<MTEntryDataYoutube_1>" target="_blank" rel="noopener"><img loading="lazy" decoding="async" width="320" height="180" src="https://img.youtube.com/vi/qrNFXrbDwGc/mqdefault.jpg" alt="mqdefault.jpg"></a></div></MTIf>

mqdefault.jpg