WordPress

ブログに動画を埋め込む方法。しかも低容量・高画質で!!(※Mac製品の方向けです)

ブログに動画を埋め込む方法。アイキャッチ画像用

こんにちは!タナトスです!

今回の記事は、低容量・高画質の動画をブログに埋め込む方法です💡

ブログに動画を埋め込むメリットは、「テキストだけではなかなか伝わりづらいニュアンスなども伝わる」「読者の方が理解しやすい」「見てても楽しい」などがあります。

しかし・・

😂「動画を埋め込むと容量が大きくてページの表示に時間が掛かる💦しかも、画質が荒くて結局見ても分かりづらい💦」

こんな時の解決方法をまとめました。

実際に私が使っている手法をご紹介していきます😉

私が使っているのが MacBook Air なので、Windows をお使いの方はこの手法が使えない可能性がありますので悪しからず🙇‍♂️

今回は私が多用する流れでご紹介していくつもりです💡

MacBookによる画面収録 ⇨ MP4に変換 ⇨ ブログに埋め込み

それでは本題に入りましょう。

MacBookによる画面収録と注意点

MacBookの画面収録は、

⬆︎5

上記のショートカットキーで可能です。

Mac製品などで行った画面収録は『mov』という拡張子で保存されます。

ブログに動画を埋め込む方法。15

『mov』を簡単に説明すると、Apple社で開発された、Macの標準動画形式です。

皆さんに知ってて欲しいのは、
WordPressは、この『mov』とは相性が悪く使えない。
という事です。

その為、MP4に変換する必要があるのです。

MP4に変換。『ファイルコンバーター』の使い方

MP4に変換するには色々な方法があります。

MacBookをお持ちの方は、『iMovie』などの映像編集ツールで書き出しをする方もいるのではないでしょうか?

しかし、それではもう一つの問題「容量」は解決できないはずです。

そこで、私がオススメしているツールをご紹介します。

ブログに動画を埋め込む方法。1

こちらのツールは、MP4だけでなく多種多様の拡張子に変換できる優れものです💡

しかも、無料!😳

1日10個までという条件付きですが、私の場合は十分強要範囲です。

もし、1日10個では追いつかない方は有料版もあります。

それでは簡単に使い方をお伝えしますね🤗

ファイルを選択

ブログに動画を埋め込む方法。2
画面中央の「ファイルを選ぶ」または、ファイルをドロップしましょう。

これでファイルのアップロードができました。

ブログに動画を埋め込む方法。3
選択したファイルがどのくらいの容量かここで確認しておきましょう💡

この記事のサンプル動画は、「1.90MB」というのが分かりますね。

ドロップダウンから「MP4」を選択

ブログに動画を埋め込む方法。4
次にドロップダウンをクリックして、「ビデオ」→「MP4」を選択しましょう。

ブログに動画を埋め込む方法。5

選択されたことが分かれば「変換」をクリック。

ブログに動画を埋め込む方法。6
アップロードが始まり、

ブログに動画を埋め込む方法。7

自動で変換されます。

「MP4」変換時の容量確認

変換が終われば、「終了済み」と表示されます。

ここで「MP4」ファイルの容量が分かります。

ブログに動画を埋め込む方法。8

なんと、274KB❗️

しかも、高画質❗️😂

これは色々試した方にとっては驚きだと思います✨

実際の動画をどうぞ↓

動画の長さや、画面収録の範囲で容量は変わります💡

ブログに掲載するのであれば、画面収録の範囲を絞り、長くても15秒までの動画をオススメします。

ちなみにサンプルは、ほぼ全画面の画面収録で、3秒の動画です。

「MP4」ファイルをダウンロード

さて、容量が確認できたらダウンロードをクリックしましょう。

ブログに動画を埋め込む方法。9

Macのパソコンであれば、右上のアイコンでダウンロードが確認できると思います。

「WordPress」にアップロード

WordPress の「メディア」を開き、右上のアイコンからそのままファイルをドロップすれば、アップロードが可能です。

ブログに動画を埋め込む方法。10

「個人的にこれが1番最速かなと思ってます」😆

ブログに動画を埋め込む方法。11

アップロードが完了したら、ファイル名が謎の乱列された文字に驚くと思いますが、慌てずに。

ファイルの詳細を開くとタイトルにそのままファイル名が反映されています。
そして、ファイル名に乱列された文字列。

ブログに動画を埋め込む方法。12

これは、WordPress のシステム上、アップロードされたファイルは新しく名前が付与される為です。

ファイル名を変更しようとしても、デフォルトの機能ではできないようになっています💦
もし、分かりづらいからこのファイル名を変更したい場合はプラグインを活用しましょう💡

投稿に埋め込む

それでは最終段階です✨

まずは、投稿に下記のコードを記載しましょう💡

横にスクロールできます!

次に、「メディア」を開き、挿入したい動画ファイルを選択します。

そして・・ 

「投稿に挿入」を押したらダメですよ🙀

ブログに動画を埋め込む方法。13

そうではなく、「URL をクリップボードにコピー」をクリックします。

そのまま投稿画面に戻ります。

コピーしたURLを先程貼り付けたコードの中の「好きな動画のURL」に貼り付けます。

ブログに動画を埋め込む方法。14

これで完了です👍

videoタグを少し説明

<video playsinline autoplay loop muted src="好きな動画のURL"></video>

 

playsinline

インライン再生してくれます。
ざっくり言うと、これがないと「iPhone」で再生がされません。
日本人はiPhone率が多いので必須ですね💡
 

autoplay

自動再生してくれます。
これがなかったら再生ボタンを押さなければいけません。
ひと手間なくなるだけで読者さんにとっては嬉しいですね✨
 

loop

ループ再生してくれます。
 

muted

音のある動画であれば消音にしてくれます。
 

以上です。

もし不要なものがあれば削除して使っていただければと思います🚀

まとめ

いかがでしたでしょうか?

ブログはテキストが一般的ですが、ネット環境が強くなっている昨今ではどんどん動画で情報発信していった方が読者さんにとっても嬉しいですし、発信する側もファンが付きやすいなどメリットがたっぷりです✨

動画を掲載するにあたり、私自身色々な問題にぶち当たりながらこのような手法に辿り着きました。
調べてもあまり情報がなかったので形になるまでかなり時間がかかりましたが、同じように困っている方にとって役に立てれれば幸いです。

もしこの記事が役に立ったらブックマークしてくれたら嬉しいです🤗