WordPressへの埋め込み動画について、基本的には、Vimeoを使ってみようと思います。理由は、広告がない、差し替えが出来る、スマホの記事内で動画の再生が出来る（インライン再生）、画質が自動調整されるので待ち時間がない、検閲される、などです。
・DropboxあるいはWordPressから直接配信する方法があります。しかし、現状、画質の自動調整がないため待ち時間が発生しやすいです。近々、5Gになると大幅に改善されるかも知れませんが。後述しますがリーガルチェックが無い点は、欠点です。
・YouTubeは、広告が入ってしまうこと、差し替えが出来ないこと、が欠点です。YouTubeの捨て難いメリットは、音声の自動翻訳、キャプションの自動翻訳(Google翻訳を使った)です。Vimeoもいずれ付加されるかも知れませんが。
・検閲される・・なにそれ？
はい。VimeoやYouTubeなどは、リーガルチェックがあります。これは、迷惑ではなく、逆に、ありがたい、と考えています。
音楽配信でも言えることですが、プライベートな方法で配信した場合、公序良俗に反するか著作権を侵害するか、よく分からず苦情や取り締まりを受ける可能性がありますが、パブリックなプラットフォームからの配信は、口うるさく規制を受ける点が、一定の安心材料になります。
・あと、時にメリット、時にデメリットと逆転しそうな問題。最近、ある特定のプラットフォームからの動画・音楽の通信料をタダにする、そのような格安SIMのオプションサービスを掲げる日本の大手プロバイダがあります。例えば、「YouTube、Netflix、Spotify・・・の視聴は無料」など。しかしVimeoは対象外にされているようですし、個人契約のクラウドサーバー発信や自宅サーバー発信などは、当然、対象外になるでしょう。しかしプロバイダの戦略でVimeoが加わるかも知れないが予測不能。このサービスは管理が難しそう、ユーザーとの間で誤請求等でトラブルが発生しそうな感じ。ややこしい。私としては、この問題までは関知しないつもりです。
表示パターンを８種類作りました。掲載したHTMLコードを、カスタムHTMLのブロックへ、コピー＆ペーストして、 /video/数字の部分? を、ご自身の作品の数字へ置き換えるだけで、使用できると思います。
ご参考にどうぞ。
なお以下のパターンですが、「いいね」「後で見る」「共有」「埋め込み」「Vimeoのロゴ」「動画再生後の終了画面」の表示変更は、Vimeoページの設定から行います。この投稿に挿入した自作ビデオは、単なるチュートリアル用ですので、「いいね」をはじめ不要なものは全てカットしています。
０ はじめに〜
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;
}１ 通常のビデオ
〜音声あり、手動で再生、繰り返しなし、広告なし、プロフィール・タイトル・投稿者なし
以下はソースコードです。
※なお、Googleサイトへ埋め込む時は、<iframe…</iframe>のみを記述します。
※サイドバーへ埋め込む時は、下記＜8＞を参照ください。
※texttrack=jaの行は、日本語字幕があれば、それがデフォルトになる指定です。
<div style="position:relative;">
<iframe src="https://player.vimeo.com/video/379527133?
texttrack=ja&
loop=0&
title=0&
byline=0&
muted=0&
pip=1&
portrait=0&
autopause=0&"
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>２ 通常のビデオの繰り返しあり
〜音声あり、手動で再生、繰り返しあり、広告なし、プロフィール・タイトル・投稿者なし。楽器の演奏など反復練習の時、便利。
以下はソースコードです。
※なお、Googleサイトへ埋め込む時は、<iframe…</iframe>のみを記述します。
※サイドバーへ埋め込む時は、下記＜8＞を参照ください。
※texttrack=jaの行は、日本語字幕があれば、それがデフォルトになる指定です。
<div style="position:relative;">
<iframe src="https://player.vimeo.com/video/379527133?
texttrack=ja&
loop=1&
title=0&
byline=0&
muted=0&
pip=1&
portrait=0&
autopause=0&"
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>３ 映像のみ提供。BGMは別のソースから。
〜音声なし(手動クリックで音出し)、手動で再生、繰り返しなし、広告なし、プロフィール・タイトル・投稿者なし。この場合、vimeo側の設定で、終了時先頭画面に戻るように指定することもできる。
↑動画の音声は消しています。
以下はソースコードです。
※なお、Googleサイトへ埋め込む時は、<iframe…</iframe>のみを記述します。
※サイドバーへ埋め込む時は、下記＜8＞を参照ください。
<div style="position:relative;">
<iframe src="https://player.vimeo.com/video/379527133?
autoplay=0&
loop=0&
title=0&
byline=0&
portrait=0&
muted=1&
pip=1&
autopause=0&"
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>４ サイドバーに表示する時など
〜音声なし（手動クリックで音出し）、手動で再生、繰り返しはあり、広告なし、プロフィール・タイトル・投稿者なし。アクセサリーとしてなど。
↑動画の音声は消しています。
以下はソースコードです。
※なお、Googleサイトへ埋め込む時は、<iframe…</iframe>のみを記述します。
※サイドバーへ埋め込む時は、下記＜8＞を参照ください。
<div style="position:relative;">
<iframe src="https://player.vimeo.com/video/379527133?
autoplay=0&
loop=1&
title=0&
byline=0&
portrait=0&
muted=1&
pip=1&
autopause=0&"
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>５ 最近のニュースサイトやCMにある勝手に開始する無音動画（手動で停止）
〜音声なし（手動クリックで音出し）、自動再生あり、繰り返しあり、広告なし、プロフィール・タイトル・投稿者なし→ 背景動画的な利用、サイドバーの短時間動画など。
↑動画の音声は消しています。
以下はソースコードです。
※なお、Googleサイトへ埋め込む時は、<iframe…</iframe>のみを記述します。
※サイドバーへ埋め込む時は、下記＜8＞を参照ください。
<div style="position:relative;">
<iframe src="https://player.vimeo.com/video/379527133?
autoplay=1&
loop=1&
title=0&
byline=0&
portrait=0&
muted=1&
pip=1&
autopause=0&"
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>６ 背景動画
〜入力項目が何も表示されなくて、ただ単に映像が無音で流れ続けている状態、止めることはできない。※背景動画への埋め込みは、有料プランの場合に可能です。
Cocoonの「２カラム」を選択して、左の箱へ「カスタムhtml」を埋め込み、右の箱へ「段落」を埋め込んでいます。
無声動画、写真、イラストなどを、挿絵として使えばブログをオシャレに出来るかも。
以下はソースコードです。
※なお、Googleサイトへ埋め込む時は、<iframe…</iframe>のみを記述します。
※サイドバーへ埋め込む時は、下記＜8＞を参照ください。
<div style="position:relative;">
<iframe src="https://player.vimeo.com/video/379387546?
background=1&
title=0&
byline=0&
portrait=0&
autopause=0&"
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>７ 他者の動画を利用するには
〜上述は、自作の動画を埋め込むことが基本です。他者の動画を自分のブログなどに埋め込む場合は、あくまで、作者及びVimeoが許可している範囲の変更に限ります。一つサンプルを作ります。
投稿者が共有を許可していることを確認します。
投稿者が共有を許可している場合であっても、作者に敬意を表し、ポートレイト、作品名、投稿者名は表示するのがマナーです。
上記＜１＞の基本形に対して、portrait,title,byline,の数値を1へ変更します。
さらに、mutedの数値を1へ変更します。
次に、BGMは、別途自分で作ったものを、ループ可能であるプラグイン、Compact Audio Playerを使ってリンクします。作者に敬意を表すると言っておきながら、音は置き換えるとは、矛盾していないか。と、詰め寄られると弱いので、BGM Fitting Test などとして扱うのがいいかも知れません(事実私はそのつもりです)。
すると、以下のようにシンプルに、まとまります。( WordPressのAudioショートコードを使って、loopさせることも出来ます。しかし、それは帯が動くタイプです。便利な点もありますが、短い曲を何回も回転させる場合は、目がチラチラと邪魔。シンプルなボタンだけのものにしました。）
BGM FittingTest:
８ 流れる水をサイドバーへ背景動画として挿入する例
動画の差し替えができるということは。。非常に便利な使い方が想像できます。無音繰り返し再生ビデオをサイドバーに入れて、風景を入れたり、何か告知を入れたり、適宜、差し替える。様々な発信に使えそうです。
ウイジェットから→「カスタム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&
" frameborder="0" allowfullscreen=""></iframe></div>この投稿の主旨である、貼り付け動画からは外れますが、vimeoを、投稿の中で文字列にリンクして視聴したい場合は、直接にURLを、例えば、＜https://player.vimeo.com/video/914225874?texttrack=ja＞をリンクするだけでOKです。
anker_9９ 字幕をデフォルトで表示するには。。
Vimeoは、動画の差し替えが自由であることは説明済みなのですが、字幕をうまく使うと、解説ビデオなどが非常に作り易くなります。動画本体を差し替えるためには、書き出し→アップロード→トランスコーディングなど長時間が必要です。しかし字幕を差し替えるには、Vimeoに字幕をアップロードするだけで即反映します。
それで、その字幕をデフォルトでオンにしたい。
方法は実に簡単で、
<div style="position:relative;">
<iframe
src="https://player.vimeo.com/video/379527133?
texttrack=ja&
</iframe>作品id?の後に「texttrack=ja&」を追記するだけでOKです。jaは日本語の字幕です。Vimeoでは、SRT、WebVTT、DFXP/TTML、 SCC、SAMI のフォーマットの使用が可能になっていますが、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動画では大きくなるので、こうしておく）が無難。としてみてください。アドレスバーに触ると表示されるようになる場合もあります。
１０ Vimeoホームページを日本語表示にする方法
Vimeoホームページを日本語表示にする方法が、意外にわかりにくいです。実は、Settingsのページの一番下、フッターの位置に、言語選択があります。
以上。