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

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

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

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

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

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

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

ご参考にどうぞ。


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

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

以下はソースコードです。

<div style="position:relative;">
<iframe src="https://player.vimeo.com/video/379527133?
title=0&amp;
byline=0&amp;
muted=0&amp;
portrait=0&amp;
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>


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

以下はソースコードです。

<div style="position:relative;">
<iframe src="https://player.vimeo.com/video/379527133?
loop=1&amp;
title=0&amp;
byline=0&amp;
muted=0&amp;
portrait=0&amp;
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>

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

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

以下はソースコードです。

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

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

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

以下はソースコードです。

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

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

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

以下はソースコードです。

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

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

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

以下はソースコードです。

<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" 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や動画を中央に配置したい時は、Cocoonの場合は、子テーマの「スタイルシートへ」以下のように書き込みます。

動画を中央に配置したい場合の、Cocoonの記述

すると、以下のように中央に表示されます。


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

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

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

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

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

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

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


BGM FittingTest / 1:

2:

3:



以上。