【WordPress】Vimeo動画の貼り付けパターンを作ってみました。

WordPressへの埋め込み動画について、基本的には、Vimeoを使ってみようと思います。理由は、広告がない、差し替えが出来る、スマホの記事内で動画の再生が出来る(インライン再生)、画質が自動調整されるので待ち時間がない、検閲される、などです。

・DropboxあるいはWordPressから直接配信する方法があります。しかし、現状、画質の自動調整がないため待ち時間が発生しやすいです。近々、5Gになると大幅に改善されるかも知れませんが。後述しますがリーガルチェックが無い点は、欠点です。

・YouTubeは、広告が入ってしまうこと、差し替えが出来ないこと、が欠点です。YouTubeの捨て難いメリットは、音声の自動翻訳、キャプションの自動翻訳(Google翻訳を使った)です。Vimeoもいずれ付加されるかも知れませんが。

・検閲される・・なにそれ?
はい。VimeoやYouTubeなどは、リーガルチェックがあります。これは、迷惑ではなく、逆に、ありがたい、と考えています。
 音楽配信でも言えることですが、プライベートな方法で配信した場合、公序良俗に反するか著作権を侵害するか、よく分からず苦情や取り締まりを受ける可能性がありますが、パブリックなプラットフォームからの配信は、口うるさく規制を受ける点が、一定の安心材料になります。

・あと、時にメリット、時にデメリットと逆転しそうな問題。最近、ある特定のプラットフォームからの動画・音楽の通信料をタダにする、そのような格安SIMのオプションサービスを掲げる日本の大手プロバイダがあります。例えば、「YouTube、Netflix、Spotify・・・の視聴は無料」など。しかしVimeoは対象外にされているようですし、個人契約のクラウドサーバー発信や自宅サーバー発信などは、当然、対象外になるでしょう。しかしプロバイダの戦略でVimeoが加わるかも知れないが予測不能。このサービスは管理が難しそう、ユーザーとの間で誤請求等でトラブルが発生しそうな感じ。ややこしい。私としては、この問題までは関知しないつもりです。

表示パターンを8種類作りました。掲載したHTMLコードを、カスタムHTMLのブロックへ、コピー&ペーストして、 /video/数字の部分? を、ご自身の作品の数字へ置き換えるだけで、使用できると思います。

ご参考にどうぞ。

なお以下のパターンですが、「いいね」「後で見る」「共有」「埋め込み」「Vimeoのロゴ」「動画再生後の終了画面」の表示変更は、Vimeoページの設定から行います。この投稿に挿入した自作ビデオは、単なるチュートリアル用ですので、「いいね」をはじめ不要なものは全てカットしています。


<0>はじめに〜 WordPressでCocoonを利用の方は、Vimeoを埋め込んだ際、表示サイズが小さくなります。フレームの横幅一杯に表示したい場合は、子テーマ(Cocoon Child)のスタイルシートstyle.cssの.video-container{}の中を、以下のように書き換えてください。

変更前
(中央表示にしてあった場合は、margin: 0px auto;)

.video-container {
margin: 0px auto;
}

変更後
( フレームの横幅一杯、 max-width: none; )

.video-container {
max-width: none;
}


<1>通常のビデオ〜音声あり、手動で再生、繰り返しなし、広告なし、プロフィール・タイトル・投稿者なし

以下はソースコードです。
青字の部分がパラメーターです。
※なお、Googleサイトへ埋め込む時は、<iframe…</iframe>のみを記述します。
※サイドバーへ埋め込む時は、下記<8>を参照ください。

<div style="position:relative;">
<iframe src="https://player.vimeo.com/video/379527133?
title=0&amp;
byline=0&amp;
muted=0&amp;
pip=1&amp;
portrait=0&amp;
autopause=0&amp;"
style="position:absolute;top:0;
left:0;
width:100%;
height:100%;
" frameborder="0" allow="autoplay;
fullscreen" allowfullscreen="">
</iframe>
</div>
<script src="https://player.vimeo.com/api/player.js">
</script>


<2>通常のビデオの繰り返しあり〜音声あり、手動で再生、繰り返しあり、広告なし、プロフィール・タイトル・投稿者なし


以下はソースコードです。
青字の部分がパラメーターです。
※なお、Googleサイトへ埋め込む時は、<iframe…</iframe>のみを記述します。
※サイドバーへ埋め込む時は、下記<8>を参照ください。

<div style="position:relative;">
<iframe src="https://player.vimeo.com/video/379527133?
loop=1&amp;
title=0&amp;
byline=0&amp;
muted=0&amp;
pip=1&amp;
portrait=0&amp;
autopause=0&amp;"
style="position:absolute;top:0;
left:0;
width:100%;
height:100%;
" frameborder="0" allow="autoplay;
fullscreen" allowfullscreen="">
</iframe>
</div>
<script src="https://player.vimeo.com/api/player.js">
</script>

<3>映像のみ提供。BGMは別のソースから。〜音声なし(手動クリックで音出し)、手動で再生、繰り返しなし、広告なし、プロフィール・タイトル・投稿者なし。この場合、vimeo側の設定で、終了時先頭画面に戻るように指定することもできる。

↑動画の音声は消しています。

以下はソースコードです。
青字の部分がパラメーターです。
※なお、Googleサイトへ埋め込む時は、<iframe…</iframe>のみを記述します。
※サイドバーへ埋め込む時は、下記<8>を参照ください。

<div style="position:relative;">
<iframe src="https://player.vimeo.com/video/379527133?
autoplay=0&amp;
loop=0&amp;
title=0&amp;
byline=0&amp;
portrait=0&amp;
muted=1&amp;
pip=1&amp; autopause=0&amp;"
style="position:absolute; top:0; left:0; width:100%; height:100%; " frameborder="0" allow="autoplay; fullscreen" allowfullscreen=""> </iframe> </div> <script src="https://player.vimeo.com/api/player.js"> </script> <p>↑動画の音声は消しています。</p>

<4>サイドバーに表示する時など〜音声なし(手動クリックで音出し)、手動で再生、繰り返しはあり、広告なし、プロフィール・タイトル・投稿者なし。アクセサリーとしてなど。

↑動画の音声は消しています。

以下はソースコードです。
青字の部分がパラメーターです。
※なお、Googleサイトへ埋め込む時は、<iframe…</iframe>のみを記述します。
※サイドバーへ埋め込む時は、下記<8>を参照ください。

<div style="position:relative;">
<iframe src="https://player.vimeo.com/video/379527133?
autoplay=0&amp;
loop=1&amp;
title=0&amp;
byline=0&amp;
portrait=0&amp;
muted=1&amp;
pip=1&amp; autopause=0&amp;"
style="position:absolute; top:0; left:0; width:100%; height:100%; " frameborder="0" allow="autoplay; fullscreen" allowfullscreen=""> </iframe> </div> <script src="https://player.vimeo.com/api/player.js"> </script> <p>↑動画の音声は消しています。</p>

<5>最近のニュースサイトやCMにある勝手に開始する無音動画(手動で停止)〜音声なし(手動クリックで音出し)、自動再生あり、繰り返しあり、広告なし、プロフィール・タイトル・投稿者なし→ 背景動画的な利用、サイドバーの短時間動画など。

↑動画の音声は消しています。

以下はソースコードです。
青字の部分がパラメーターです。
※なお、Googleサイトへ埋め込む時は、<iframe…</iframe>のみを記述します。
※サイドバーへ埋め込む時は、下記<8>を参照ください。

<div style="position:relative;">
<iframe src="https://player.vimeo.com/video/379527133?
autoplay=1&amp;
loop=1&amp;
title=0&amp;
byline=0&amp;
portrait=0&amp;
muted=1&amp;
pip=1&amp; autopause=0&amp;"
style="position:absolute; top:0; left:0; width:100%; height:100%; " frameborder="0" allow="autoplay; fullscreen" allowfullscreen=""> </iframe> </div> <script src="https://player.vimeo.com/api/player.js"> </script> <p>↑動画の音声は消しています。</p>

<6>背景動画〜入力項目が何も表示されなくて、ただ単に映像が無音で流れ続けている状態、止めることはできない。※背景動画への埋め込みは、Plus/PRO/Businessプランの場合に可能です。

Cocoonの「2カラム」を選択して、左の箱へ「カスタムhtml」を埋め込み、右の箱へ「段落」を埋め込んでいます。
無声動画、写真、イラストなどを、挿絵として使えばブログをオシャレに出来るかも。

以下はソースコードです。
青字の部分がパラメーターです。
※なお、Googleサイトへ埋め込む時は、<iframe…</iframe>のみを記述します。
※サイドバーへ埋め込む時は、下記<8>を参照ください。

<div style="position:relative;">
<iframe src="https://player.vimeo.com/video/379387546?
background=1&amp;
title=0&amp;
byline=0&amp;
portrait=0&amp;
autopause=0&amp;" 
style="position:absolute;top:0;
left:0;
width:100%;
height:100%;
" frameborder="0" allow="autoplay;
fullscreen" allowfullscreen="">
</iframe>
</div>
<script src="https://player.vimeo.com/api/player.js">
</script>


<7>他者の動画を利用するには〜上述は、自作の動画を埋め込むことが基本です。他者の動画を自分のブログなどに埋め込む場合は、あくまで、作者及びVimeoが許可している範囲の変更に限ります。一つサンプルを作ります。

(1)「検索」して、選択する動画を表示。
(2)これを選んだ。
(3)右上の共有ボタンがあることを確認。

投稿者が共有を許可していることを確認します。

投稿者が共有を許可している場合であっても、作者に敬意を表し、ポートレイト、作品名、投稿者名は表示するのがマナーです。

上記<1>の基本形に対して、portrait,title,byline,の数値を1へ変更します。

さらに、mutedの数値を1へ変更します。
次に、BGMは、別途自分で作ったものを、ループ可能であるプラグイン、Compact Audio Playerを使ってリンクします。作者に敬意を表すると言っておきながら、音は置き換えるとは、矛盾していないか。と、詰め寄られると弱いので、BGM Fitting Test などとして扱うのがいいかも知れません(事実私はそのつもりです)。

すると、以下のようにシンプルに、まとまります。( WordPressのAudioショートコードを使って、loopさせることも出来ます。しかし、それは帯が動くタイプです。便利な点もありますが、短い曲を何回も回転させる場合は、目がチラチラと邪魔。シンプルなボタンだけのものにしました。)


BGM FittingTest:



<8> 動画の差し替えができるということは。。非常に便利な使い方が想像できます。無音繰り返し再生ビデオをサイドバーに入れて、風景を入れたり、何か告知を入れたり、適宜、差し替える。様々な発信に使えそうです。

流れる水をサイドバーへ背景動画として挿入する例:
ウイジェットから→「カスタムHTML」を選択→下記のコードをペーストします。
青字の部分がパラメーターです。
この数値の部分、及び各パラメーターについて、上記の各例を参照して、置き換えてご利用ください。

<style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style>
<div class="embed-container"><iframe src="https://player.vimeo.com/video/379387546?
background=1&amp;
" frameborder="0" allowfullscreen=""></iframe></div>
anker_9

<9> 字幕をデフォルトで表示するには。Vimeoは、動画の差し替えが自由であることは説明済みなのですが、字幕をうまく使うと、解説ビデオなどが非常に作り易くなります。動画本体を差し替えるためには、書き出し→アップロード→トランスコーディングなど長時間が必要です。しかし字幕を差し替えるには、Vimeoに字幕をアップロードするだけで即反映します。

それで、その字幕をデフォルトでオンにしたい。

方法は実に簡単で、

<div style="position:relative;"> 
<iframe 
src="https://player.vimeo.com/video/379527133?
texttrack=ja;



</iframe>

作品id?の後に「texttrack=ja;」を追記するだけでOKです。jaは日本語の字幕です。Vimeoでは、いくつかのフォーマットの使用が可能になっていますが、WordPressへの埋め込み動画用の字幕はWebVTT(.vtt)を使用することになっていますので、私はWebVTT(.vtt)を使うことを基本にしています。

例えば、

WEBVTT

00:00:00.000 --> 00:00:01.000

00:00:01.000 --> 00:00:18.232
<b>「Macの画面とBGMを操る方法」2022.Aug.6時点</b>

00:00:18.332 --> 00:00:25.194
(1)事前に2つのアプリのダウンロードが必要です。

00:00:25.294 --> 00:00:52.237
(2) 1つ目は「LadioCast」、2つ目は「Background Music」

WebVTTの作成は非常に簡単で、テキストファイルで作成し、拡張子を.vttに変更すればOKです。
記述方法は、「00:00:00.000」最後尾列の前が「.」なのに注意。次にスペース、次に「–>」、次にスペース、再び「00:00:00.000」。
次の行に、表示する文字を打ち込みます。
その時文字の両端を<b> </b>で囲むと、そこが太字になります。
以上だけです。
文字の大きさの変更、文字の色の変更は、Vimeo側でエラーになります。
ある意味、非常に簡単なので、特別なアプリは必要ないかも知れません。ただし、動画への表示を確認したくなります。従って、動画上で確認できる小さいアプリ「字幕工房」などが適しています。欠点は、「字幕工房」はsrtを生成しますがvttは作れません。そこで無料のフォーマットコンバーターサービスを使ってvttへ変換する手間が発生します。

なお、スマホで再生するとき、デフォルトで字幕選択済みで、CCが青色に表示されているのに、字幕がすぐに表示されない不具合が散見されます。その場合は、iPhoneの場合は、「設定」→「アクセシビリティ」→「標準字幕とバリアフリー字幕」→「クローズドキャプション+SDHをオフ」スタイルは「大きな文字」(実は「大きな文字」に設定しても、Vimeoの場合はサイズが変わらないかも知れないがWordPress動画では大きくなるので、こうしておく)が無難。としてみてください。アドレスバーに触ると表示されるようになる場合もあります。

以上。