WordPress

【WordPress】記事に簡単に動画を埋め込む方法


WordPress で動画を埋め込む方法

記事内に動画を埋め込むことで、読者に「文字」や「絵」だけではない案内をすることができます。

また YouTube などを埋め込むことで記事内で動画を見せることができますので、他サイトへの移動・自サイトからの離脱を避け、記事の滞在率を高める効果も期待ですます。

動画の埋め込み

WordPress に埋め込むことができる動画は主に次の2種類です。

  • 自分で撮った動画ファイルの埋め込み(サイズ制限あり)
  • YouTube 動画の埋め込み

■ 自分で撮った動画のサンプル

スマホなどで撮った動画(形式 mp4)を記事に埋め込んだサンプルです。

記事に動画を直接埋め込む場合は、動画のサイズは WordPress にアップした動画そのままになります(デバイスや画面幅によって適切にファイルサイズが縮小されるわけではない)。

そのためサイトの表示速度が重くなる懸念があるものの、常にクオリティの高い映像を提供することが可能です。

■ YouTube 動画の埋め込み

YouTube の動画を記事に埋め込んだサンプルです。

WordPress にアップできる動画にはサイズの上限がありますので、大きい動画の場合は YouTube にアップして埋め込むことも一つの方法です。

また YouTube の動画は、表示するデバイス、画面幅によって適切なファイルサイズの動画を(’YouTube 側が)表示しますので、サイトの表示速度が重くなりにくい特徴があります。

動画の埋め込み方法

■ 動画ブロックで埋め込む

WordPress では、「動画用のブロック」を利用することで動画を埋め込むことができます。

(画像を表示する場合と同じ感覚です)

  • 記事エディタにて 「動画ブロック」 を選択します
  • 通常の画像(イメージ)を貼る場合と同様に動画ファイル(mp4)を貼ります

動画ブロックのプロパティで動画再生の設定を行うことが可能です。

自動再生ON で自動再生します。
ループON でループ再生します。
ミュートON で音声をミュートします。
プレイバックコントロールON で、コントロールバー(再生するバー)を表示します。
インラインで再生ON でインラインで再生します。
先読み先読みを設定します。
・ 自動
・ メタデータ
・ なし
ポスター画像サムネイル画像を設定します。

完成です。

ポイント

WordPress のメディア(画像や動画)は(お使いの環境ごとに)最大アップロードサイズが設定されています。

確認する場合は、WordPress の管理画面から 「メディア」 操作にて 「メディアライブラリ」 を表示し、[新規作成] 操作をした場合に画面上の表示 「最大アップロードサイズ:〇MB」を確認できます。

■ YouTube の動画を埋め込む

WordPress の記事作成で用意している YouTube 用のブロックを利用します。

  • 記事エディタにて 「YouTube ブロック」 を選択します
  • 埋め込みたい YouTube の URL を貼ります

完成です。

■ Videoショートコードを利用する

Video ショートコードを利用することで、動画とは別にサムネイル画像を設定することが可能です。

WordPress のブロックエディタの段落ブロックにそのまま Video ショートコードを書き込んでください。

■ Video ショートコードを利用する場合のサンプル

[video src="https://xxx/xxx/sample.mp4" poster="https://xxx/xxx/sample.jpg"]

poster プロパティで指定した画像を動画のサムネイルとして利用します。

まとめ

WordPress に埋め込むことができる動画は主に次の2種類です。

  • 自分で撮った動画ファイルの埋め込み
  • YouTube 動画の埋め込み

記事に埋め込む動画の種類や方向性で、一番良い方法を選んで利用することが可能です。

もっと WordPress のノウハウを知りたいときは

WordPress の情報、テクニック一覧はこちらをクリック!

クリックアイコン

WordPress のおすすめテーマ

  • SEO に強く【集客力強化】が望める
  • かっこいい(かわいい)ホームページを作りやすい
  • 初心者でも使えて、上級者になっても満足できる

本気でブログアフィリエイトを戦うなら、使うテーマは「AFFINGER」!

WordPress ブログの最上級おすすめテーマ「AFFINGER」をお試しください。

AFFINGER の紹介はこちら

AFFINGER アフィンガーテーマを解説・メリット・デメリット

AFFINGER テーマを使うと「オシャレなサイト」を作りやすくなります。オシャレなサイトは、ユーザーの滞在時間が増え、サイト評価があがり、サイトの露出が増えて、さらにユーザ(読者)を呼び込む好循環を実現します。WordPressのテーマ「AFFINGER」を徹底紹介します。

続きを見る




ブログランキング・にほんブログ村へ  


Presented By Boon Boon Blog .Com

広告の設置・収入について

当サイトは ASP が提供するサービスを利用し、広告、適格販売により収入を得ています。