WordPressにビデオを挿入する方法

公開: 2020-11-27

興味深く魅力的なコンテンツを作成することは、訪問者をそれに巻き込み、あなたとあなたの製品についてもっと知りたいと思うための鍵です。 以前、私はあなたが恋に落ちるページを作成するためのいくつかのトリックについてすでに述べました、そして私は視覚的要素を含めることの重要性について明確に述べました。

実際、昨年のZenithの調査によると、2021年には、1日あたり最大100分の動画視聴が増加し、動画広告の支出が35％増加すると予測されていました。 Ciscoによると、2022年までに、すべてのインターネットトラフィックの80％がビデオ形式になります。 そして、私はこれらすべての予測が現在のパンデミックに達していないのではないかと心配しています。

グローバルオンラインビデオ視聴
2021年のグローバルオンラインビデオ視聴および広告予測。

したがって、Webサイトの投稿やページにビデオを追加することの重要性についてさらに悩むことなく、WordPressでビデオを追加するのがいかに簡単であるか、そして最新バージョンのGutenberg9.2.2が提供する新機能を見てみましょう。

ビデオのURLをコピーする

WordPressエディターを使用すると、どのプラットフォームからでも非常に簡単にビデオを埋め込むことができます。 ブラウザでは、ビデオが配置されているプラ​​ットフォームから、そのURLを直接コピーできます。

YouTubeビデオのURLを選択する方法のスクリーンショット
埋め込む動画のURLを選択してコピーします。

ビデオを共有するために見つけた[共有]ボタンをクリックしてURLをコピーすることもできます。このボタンを使用して、ビデオの開始時刻を示すなどのオプションを追加できます。

YouTubeビデオを共有する
1分で開始することを示すYouTubeビデオを共有します。

次に、テキストブロックに直接貼り付けるか、挿入するビデオの種類のブロックを事前に選択するオプションがあります。 したがって、たとえば、WordCamp US 2019 – Matt Mullenwegが表示された瞬間から始まるYouTubeのWordビデオの状態を埋め込みたい場合は、新しいYouTubeブロックを作成し、URLhttps://youtu.be/gS6_xOABTWoを挿入しますhttps://youtu.be/gS6_xOABTWo?t=2085 （またはURL https://www.youtube.com/watch?v=gS6_xOABTWo&start=2085 ）。

YouTubeビデオを埋め込みます。
YouTubeビデオを埋め込みます。

時刻は秒単位で表示する必要があることに注意してください。 さらに、ページ内で必要に応じてビデオを配置するオプションもあります。

YouTubeタイプのブロックのビデオを揃えます。
YouTubeビデオタイプブロックを揃えます。

そして、あなたはあなたの投稿に新しい埋め込みビデオを取得します：

ただし、それだけでなく、YouTubeブロック（または別の種類のビデオ）を追加すると、ビデオディスプレイに追加できる他のオプションもあり、再生されるプラットフォームによって異なります。

したがって、たとえば、YouTubeの場合、（URLの追加パラメーターを介して）使用可能なオプションは次のとおりです。

  • テーマに合わせたデフォルトの幅と高さでビデオを埋め込むには：https： https://www.youtube.com/gS6_xOABTWo
  • 幅と高さを明示的に指定するには： https://www.youtube.com/watch?v=gS6_xOABTWo?&w=320&h=240 ：//www.youtube.com/watch？v = gS6_xOABTWo？＆w = 320＆h = 240
  • 幅のみを指定するには： https://www.youtube.com/watch?v=gS6_xOABTWo&w=320 ：//www.youtube.com/watch？v = gS6_xOABTWo＆w = 320
  • プレーヤーを左揃えにするには： https://www.youtube.com/watch?v=gS6_xOABTWo&align=left ：//www.youtube.com/watch？v = gS6_xOABTWo＆align = left
  • プレーヤーを右に揃えるには： https://www.youtube.com/watch?v=gS6_xOABTWo&align=right ：//www.youtube.com/watch？v = gS6_xOABTWo＆align = right
  • 動画の終了後に同じチャンネルの関連動画のみを表示するには： https://www.youtube.com/watch?v=gS6_xOABTWo&rel=0 ：//www.youtube.com/watch？v = gS6_xOABTWo＆rel = 0
  • 動画の開始時刻と終了時刻を指定するには、開始時刻と終了時刻を追加します： https://www.youtube.com/watch?v=gS6_xOABTWo&start=75&end=500 ://www.youtube.com/watch?v=gS6_xOABTWo&start=75&end=500

WordPressでビデオをアップロードして表示する

自分のビデオをサードパーティのプラットフォームにアップロードしたくなくて、WordPressサーバーだけに残したい場合があります。 ビデオをメディアライブラリにアップロードして追加するのは、他の画像をアップロードするのと同じくらい簡単です。 [メディア]をクリックするか、ビデオタイプのブロックを追加します。

ビデオタイプのブロック。
ビデオタイプのブロック。

画像を追加するときと同じように、動画を直接アップロードするか、メディアライブラリから選択するか、URLを挿入するかを選択できます。

ブロックエディタでビデオブロックを追加する方法のSchreenshot
ブロックエディタからビデオを追加します。

次に、メディアライブラリで、挿入するビデオを選択するだけで、ページまたは投稿で利用できるようになります。

WordPressのメディアライブラリで利用可能なビデオファイルのスクリーンショット
埋め込むことができるすべてのビデオは、メディアライブラリに表示されます。

選択すると、すべての訪問者が利用できるようになります。

また、グーテンベルク9.2.2の新しいバージョン。 ビデオ挿入に新しい機能を追加します。 特に、編集メニューからタイプ<track>のHTML要素を追加できます。

確かに、ビデオをダウンロードした場合、それを含むフォルダーにはSRTファイルも含まれていることに気づきました。 これらは、ビデオには含まれていませんが、ビデオプレーヤーが視聴しているビデオと同期して抽出および表示できる字幕ファイルです。 したがって、 track要素は、これらのSRTファイルの場所といくつかの追加機能を示すのに役立ちます。

ビデオを挿入する場合、生成されるHTMLは次のようになります。

 <!-- wp:video {"id":15850} --> <figure class="wp-block-video"> <video controls="" src="/my-site.com/.../my-video.mp4"></video></figure> <!-- /wp:video -->

この新しいバージョンのグーテンベルクでは、HTMLをまったく編集せずに、編集メニューからビデオにトラック要素を追加できるようになりました。 したがって、たとえば、ビデオに英語の字幕を追加すると、HTMLコードに字幕情報を含むトラックが含まれます。

 <video controls="" src="/my-site.com/.../my-video.mp4"> <track src="mi-sitio.com/.../english-captions.srt" label="English" srclang="en"> </video>

トラックに表示できる属性は次のとおりです。

  • srclang –トラックのテキストデータの言語。 有効なBCP47言語タグコードである必要があります。
  • label –プレーヤーインターフェイスのタイトル。
  • 種類–トラックテキストの使用方法。 次のキーワードを含めることができます。
    • 字幕
      • 言語を理解していない人のために設計された、ビデオコンテンツの翻訳用の字幕（たとえば、ビデオが英語の場合はスペイン語の字幕）。
    • キャプション
      • 聴覚障害のある人を対象とした、ビデオで聞こえた内容（ダイアログやその他の音）の文字起こし。
    • 説明
      • 目の見えない人やビデオを見ることができない人を対象としたビデオコンテンツのテキストによる説明。
    • チャプター
      • 章のタイトルは、ユーザーがマルチメディアリソースをナビゲートするときに使用することを目的としています。
    • メタデータ
      • スクリプトで使用されるトラック。 ユーザーには表示されません。
  • src –テキストファイルのURL。

これらのトラックを追加するにはどうすればよいですか？ 非常に簡単です。ビデオタイプのブロックを追加し、表示するビデオを選択すると、ビデオ編集メニューに新しいオプションが表示されます。これは、 [メディアライブラリを開く]または[アップロード]のオプションを含む[トラックの追加]です。

トラックのテキストを含むファイルをメディアライブラリからアップロードまたは選択します。
トラックのテキストを含むファイルをメディアライブラリからアップロードまたは選択します。

ファイルをメディアライブラリにアップロードすると、選択する準備が整います。

WordPressメディアライブラリから、ビデオと同期するテキストを含むトラックを選択する方法のスクリーンショット
メディアライブラリから、ビデオと同期するテキストを含むトラックを選択します。

トラックの属性を編集できるビデオ編集メニューに、それがどのように表示されているかがわかります。

トラックのプロパティを編集します。
ファイルを選択すると、トラックのプロパティを編集できるようになります。

[編集]ボタンをクリックして、必要に応じて属性を変更します。 これで、ビデオに含まれるテキストトラックがビデオディスプレイと同期されます。

グーテンベルクでビデオのトラックの属性を変更する方法のスクリーンショット
必要に応じて、トラックの属性を変更します。

したがって、メディアライブラリに独自のビデオを含めるだけでなく、それらに関する追加情報を簡単に含めることもできます。

サードパーティのプラットフォームでホストしているビデオを含めることは、ビデオが配置されている場所のURLをコピーするだけで非常に簡単であることをすでに見てきました。 しかし、何らかの理由で、独自のWordPressインストールでビデオをホストしたい場合は、この最新バージョンのGutenbergを使用して、快適な方法でビデオを表示できるようになりました。

UnsplashのCardMaprによる写真。