【ブログへの動画掲載】Videoタグの動画をYoutube経由に移行すべきか、それとも…

ブログに動画を載せるのに、これまでWordpressで動画ブロックを配置して、メディアに動画ファイルをアップロードしていました。いわゆる<video>タグ。ブログ開設当初は、CADの操作紹介を短時間に低画質で埋め込んでいました。

しかし、記事を見直してみると「もう少しちゃんとした動画を載せないとなぁ」と思うようになり、コメントを入れたり、2k（1920×1080）サイズの少し高画質でアップロードしたりしてきました。

ただ、動画ファイルのサイズを大きくすればするほど、サイトをご覧いただく訪問者の方々のデバイスに依らず大きな動画データを配信することになってしまいます。

過去の動画の高画質化も含めて再掲載したい想いもあったので、これまで通りvideoタグによる配置でいいのか、Youtube埋め込みブロックで掲載するのが良いのかを検討した結果と、それによってYoutubeチャンネルを作ってテストしたので、チャンネル開設の流れなどを紹介します。

<videoタグ>か「youtube埋め込み」か？

そもそもvideoタグを使った動画とYoutube埋め込み動画の見た目の大きな違いは、見慣れたYoutubeの再生ボタンが、ないかあるかです。「見慣れた」というのは重要な要素ですね（クリックしても予想に反しない安心感があります）

下記に配置した方法や設定項目を掲載しましたが、Wordpress6.1.1＆THE SONIC 2.1.1での環境になります。テーマが違うと便利機能が追加されていることがあるかもしれません。

videoタグでの掲載例はこちら

WordPressの動画ブロックを選択すると下記のボックスが表示され、メディアライブラリ内の動画もしくは、パソコン内の動画ファイルをアップロードして配置します。

動画ブロックで配置したのがこちら。

上のブロックをHTMLとして編集すると下記のコードになります。

<figure class="wp-block-video">
　<video controls src="https://www.cji-bench.tech/wp-content/uploads/2022/11/low-table06.mp4">
　</video>
</figure>

そしてこの動画ブロックの設定項目は下記のような多くの項目が用意されています。ミュート（消音）を良く使いますし、パディング（余白）が簡単に設定出来たりもします。

Youtubeにアップロードした動画を配置

Youtubeにアップロードした動画をWordpressブログに掲載する方法では、Youtube埋め込みブロック、カスタムHTMLブロック、内部/外部リンクブロックを紹介します。

Youtube埋め込みブロックで配置

Youtube埋め込みブロックで配置した動画がこちら。普段の段落ブロックにYoutubeのURLをペーストしても同じようにYoutube埋め込みブロックが貼り付けられます。手間がかからずすぐに配置できます。

ボックスにURLを指定するだけのシンプルさです。

埋め込みを押すと下記のように動画が埋め込まれます。

Youtube埋め込みブロックの設定項目はこちらですが、ブロックしたのマージンくらいで特にありません。

カスタムHTMLブロックで配置した動画がこちら

カスタムHTMLで配置した動画がこちら。Youtubeの再生画面下にある共有ボタンを押して表示されるウインドウの埋め込みをクリックすると、下記のウインドウが開きます。

このウインドウの右下のコピーを押して、WordpressのカスタムHTMLブロックの「HTMLを入力…」にそのままペーストします。

このままなら、先のYoutube埋め込みブロックと同じ動作ですが、HTMLを追記編集することで、ミュート（消音）「mute=1」とか、再生後の関連動画表示カードをチャンネル内のみに限定する「rel=0」などの設定が出来ます。