【WordPress】サイドバーに無音繰り返し動画を置くのは、とても簡単!!

 Vimeoの動画を無音繰り返し動画として利用する場合については、こちらのブログをご覧いただくとして、一般的な、WordPressフォルダ内の動画、Dropboxの動画など、URLにて呼び出せるものについては、サクッと簡単に、作ることが出来るので、ご紹介します。

以下のようになります。


<WordPressのサイドバーへ無音繰り返し動画を貼り付ける>
別ページで表示


以下は、サイドバー用無音繰り返し動画のソースコードのサンプルです。
下記のポイント解説の中に動画貼り付けがありますが、この動画ブロックを、HTML記述に変更してコピーしただけです。

<ソースコードサンプル>

<figure class="wp-block-video aligncenter"><video autoplay loop muted src="https://xxxxxxxx/xxxxx/xxxxx.mov" playsinline></video></figure>

これを、ウイジェットのカスタムHTMLへ、コピー&ペーストして、URLの部分だけを置き換えます。

ポイント解説

<1> 無音繰り返し動画を、本文の中で作ってみます。

ブロックから動画を選びます。本文では、右に表示されるバーから、再生の方法を細かく指定することが出来ます。自動再生、ループ、ミュート、インライン再生、をON、プレイバックコントロールだけをOFFにしてみると、上のように無音繰り返し動画になります。

<2> HTMLソースコードの取り出し方

貼り付けた動画をクリックすると、バーに点3つのマーク→HTMLとして編集、を選びます。

ソースコードが表示されます。これをコピーします。単にコピーするだけで何も変更しませんので、ご注意ください。

超簡単です!

<3> 名古屋港水族館のライブ映像をサイドバーへ載せるには(但しMac,iPad,iPhone)。

珍しく、名古屋港水族館はライブ配信を行っているホームページがあります(いつまでサービスを行ってくれるかわかりませんが)。この中からサンゴ礁大水槽のURLをカスタムHTMLブロックへ貼り付けると、以下になります。これをウイジェットのカスタムHTMLへコピー&ペーストすると、なかなかオシャレになります。ただし、以下のソースコードは、Windowsでは表示されない可能性があり、調べてみます。

<ソースコードサンプル>

<figure class="wp-block-video aligncenter"><video autoplay="" loop="" muted="" src="https://st2.ctc.co.jp/hls-live/livepkgr/_definst_/liveevent/live8.m3u8" playsinline=""></video></figure>

以上です。