【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 / 1:

2:

3:



<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>

以上。