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ソースコードの取り出し方
貼り付けた動画をクリックすると、バーに点３つのマーク→HTMLとして編集、を選びます。
ソースコードが表示されます。これをコピーします。単にコピーするだけで何も変更しませんので、ご注意ください。
超簡単です！
<3> 名古屋港水族館のライブ映像をサイドバーへ載せるには（但しMac,iPad,iPhone）。
珍しく、名古屋港水族館はライブ配信を行っています（いつまでサービスを行ってくれるかわかりませんが）。この中からサンゴ礁大水槽のURL(※1)をカスタムHTMLブロックへ貼り付けると、以下になります。これをウイジェットのカスタムHTMLへコピー＆ペーストすると、なかなかオシャレになります。ただし、以下のソースコードは、Windowsでは表示されない可能性があり、調べてみます。
※1:URLは時々変更されているようです。Macの場合は、再生中のライブ動画の上で右クリック→ビデオアドレスをコピー、します。
＜ソースコードサンプル＞
<figure class="wp-block-video aligncenter"><video autoplay="" loop="" muted="" src="https://st1.ctc.co.jp/edge/coralreef/playlist.m3u8" playsinline=""></video></figure>以上です。
