vimeo動画の埋め込み方法とレスポンシブ対応のさせ方

ここあです。

ワードプレスに埋め込む動画形式は大きく2つあります。

• 1つはYoutubeにアップして動画を埋め込む方法
• もう1つはvimeoにアップして動画を埋め込む方法

ちなみにYoutube動画の埋め込み方法はこちらの記事にまとめています。

ということで、今回は、vimeoにアップした動画を

ワードプレスの記事に埋め込む方法と

vimeo動画をレスポンシブ対応させる方法についてまとめておりますので

vimeo動画をワードプレスにスマホ対応で

綺麗に埋め込みたいというあなたはぜひ参考にしてくださいね。

vimeo動画をワードプレスに埋め込む方法

それではまず、vimeoにアップした動画を

ワードプレスに埋め込む方法から簡単に解説させていただきます。

なお今回は、すでにvimeoについて知っているのを前提として

進めさせていただきますので、あらかじめご了承ください。

１）vimeoにログインする

vimeoにアップした動画を埋め込む場合はまず

vimeoにログインしましょう！

vimeoのトップページで「ログイン」をクリックすると

以下のようなID入力画面が表示されますので、

• vimeo用のログインIDとパスワードを新たに作成
• Facebookアカウント
• Googleアカウント
• Apple ID

いずれか、

あなたが動画をすでに登録しているアカウントや

有料プランにしているアカウントでログインするようにしてください。

vimeoにログインすると、このような動画一覧の画面が表示されますので、

画面左にあるメニューバーから「動画」をクリック。

そうすると、あなたが登録している動画の一覧を確認することができます。

なお、動画一覧をリスト表示にしたい場合は、右上のアイコンをクリックすることで

このような、一覧表で見ることもできますし、逆に、

右上のアイコンをクリックすることで上記、グリッド表示への変更が可能です。

そして、ワードプレスにvimeoの動画をアップしたい場合は

アップしたい動画を選び、動画下に表示されているリンクアイコンをクリックしましょう。

リンクアイコンをクリックすると、さらに以下3種類のリンクコードが選べますので

「埋め込みコードをコピー」をクリックすると、画面下部に

以下のメッセージが表示され、リンクコードがコピーできます。

そのコードをワードプレスで「テキスト編集モード」に切り替え、記事内にペーストします。

しかし、このままだと以下のように、余計な空白ができてしまいますので、

それらを調整ししつつ、レスポンシブとなるCSSコードをご用意いました。

2）vimeo動画をレスポンシブ対応させる方法

vimeo動画をCSSで調整するには、先にHTMLコードの下準備が必要となります。

ですので、まずは、HTMLコードから調整しましょう。

手順は以下の通り。

先ほどワードプレスに貼り付けたvimeo動画の埋め込みコードの前後に

以下、HTMLコードをまずは追記してください。※ピンクの部分を新たに追記

実際に上記追加するHTMLコードを反映した時のイメージは、以下を参考にしてください。

※「”」は必ず半角になるようにしてください。

HTMLコードにCSSを反映するためのコードが追記できたら、

あとはCSSをコピーするだけで大丈夫です。

ということで、CSSコードの追記先は、ダッシュボードメニューから

外観 → カスタマイズ → 追加CSSをクリックし、

以下の部分にCSSコードを貼り付けるようにしてくださいね。

今回、あなたにコピペしてもらうCSSコードは以下の通り

追加CSSにコピペ

.vimeo {
position: relative;
height: 0;
padding: 0 0 56.25%;
overflow: hidden;
}
.vimeo iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

上記、CSSコードをコピペすれば見た目もスッキリ！

レスポンシブ対応で綺麗なvimeo動画が反映できます。

以上、vimeo動画をレスポンシブ対応で綺麗に埋め込むためには

1. vimeoから動画の埋め込みコードをコピーしてワードプレスに貼り付ける
2. 埋め込みコードにHTMLコードを追記
3. レスポンシブ対応のCSSコードを追加CSSにコピペ

以上、3ステップで簡単にできます＾＾

vimeoとYoutubeとの決定的な違い

ここからはおまけになりますので、vimeo動画のことを

初めて知ったというあなたは興味があれば読んでください。

興味がなければ、ここで離脱していていただいて大丈夫です。

さて、vimeoとYoutube動画では何が違うのか？

答えは簡単です。

• あなたが編集した動画を広く世の中に広めたいのか
• ごく限られた人にだけ見て欲しいのか

その違いで使い分けていただけたらと思います。

実際、Youtubeというのは視聴者からの広告収入で運営されているため

今やYoutuberが世界中で活躍している通り、

たくさんの動画を気軽に広めながら、広告収入を得られるというのが

Youtubeの魅力でもあります。

ですから、当然、Youtubeには広告が出ます。

逆にvimeoというのは広告収入で運営しているのではなく

vimeoの会費でもってプラットフォームが運営されています。

つまり、vimeoとYoutubeとの最も大きな違いは

動画再生中に「広告が表示されるか、表示されないか。」

実際、vimeoでは動画の再生中に広告が一切表示されません。

そういう意味でvimeo動画というのは、

有料会員の動画コンテンツとしては非常におすすめですし

vimeoを使えば、自分が編集した動画を

視聴者に集中して見てもらうことが可能です。

また「秘匿性」という意味ではvimeoの方が優れています。

実際、Youtube動画は限定公開にできるものの

その動画のurlを知る人はみんな動画を見ることができるため

あまり秘匿性を守りにくいプラットフォームになっています。

逆にvimeo動画の場合は、しっかりとパスワードロックをかけられたり

動画のダウンロードを禁止する項目などもありますので

※料金プランによります。

簡単に動画が盗み見されたり、

頑張って編集した動画がダウンロードされたりするリスクが低く

著作権等はYoutubeよりも守りやすい環境となっています。

ただし、Youtubeの場合は、

無料でいくらでも自分の動画がアップできるのに対し

vimeoの場合、無料プランは1度に500MBまでと

アップロードのデータ量に制限がかかっているため、

有料プランに移行しないと使いにくいというデメリットがあります。

ということで、簡単にだけまとめておくと

Youtube動画のメリットは

• 無料でたくさんの動画を気軽にアップすることができる
• 世界中の人に動画を見てもらいやすいプラットフォーム
• 広告収入でお金を稼ぐことができる

vimeo動画のメリットは

• 秘匿性が高く、会員サイト用の動画として使いやすい
• パスワードロックやダウンロード制限もでき安心
• 動画再生中に広告表示が一切ないので、視聴者に集中して動画を見てもらえる

逆に、

• Youtube動画のデメリットは「秘匿性」を維持しにくい
• vimeo動画のデメリットは「有料プラン」に切り替えないと使いにくい

と言った感じです。

簡単ではありますが、そもそもYoutubeとvimeoの何が違うの？と

あなたが疑問に思うかもしれないと思いましたので、

２つの違いについてご紹介させていただきました。

ですから、同じ動画コンテンツでも

「誰に向けて発信するか」で使い分けをすることもできますし

これからはより多くの人が動画を配信する時代になると思いますので

今後、会員サイトやコミュニティの運営を視野に入れているあなたは

vimeo動画の存在や、活用方法というのもぜひ覚えておいて

いただけたらなと思います。

vimeo動画の埋め込み方法とレスポンシブ対応のさせ方まとめ

今回はvimeo動画をワードプレスの記事に埋め込む方法、

さらにスマホで綺麗に表示させるための

レスポンシブ対応の方法について解説させていただきました。

最近は、本当にスマホの劇的な進化により

高画質な動画が素人でも簡単に撮影できるようになり

その動画を簡単にアップし、世界中に配信できる

Youtubeのようなプラットフォームもたくさん登場しています。

ですので、今では大人から子供まで多くの人が気軽に

動画を公開できる環境もありますし、

仮に文章をまとめるよりも話す方が得意というなら

動画を撮って公開すれば良いんですね。

今は、それほどまでに情報発信するにしても、一昔前とは異なり

• 文章
• 写真
• 動画
• 音声

これら様々な組み合わせで自分が得意とする伝達手段を使い

自分の好きなことや得意なことを世界中の人に広めることができる時代。

特に最近では、ブログによる情報発信、SNSによる情報発信で

例え有名人でなくとも多くのフォロワーやファンを獲得し

自分のことを慕ってくれる方対象にビジネスを行うことも可能です。

ですので、これだけ気軽に自分の好きなことやスキルが

世間に広めやすい時代になっておりますので、

ぜひあなたの好きなことを動画に撮ってYoutubeにアップしたり、

価値ある秘密の情報をvimeoにアップして

あなた自身の存在感や価値をぜひ高めるようにしてみてください。

正直、今はそれだけでも本当にびっくりするぐらい人生が激変する時代ですし

自分には無理と「食わず嫌い」で何もやらないよりは

「とりあえずやってみよう！」と気軽に挑戦する方が

自分では気付かなかった才能が開花する可能性が高くなります。

実際、自分が才能に気付いてないにしても、今はSNSなど

周りの人が自分の性能に気付いたり、気付かせてくれる環境もあるのです。

そもそも、今、この記事を読んでいるあなたはすでに動画を撮影し、

vimeoにアップして、何かしらビジネスに繋げようと

行動されている方ではないでしょうか？

ですから、もしあなたがそういうことを考えておられるのなら

これからどんどん積極的に行動していただきたいと思いますし

逆に、動画もブログの記事と同じでただ撮れば良いということではなく

どれだけ自分が視聴者に価値提供ができるか？

そこがものすごく重要となりますので、

しっかりと動画の価値も高めるようにしてみてください。

事実、動画もブログの記事と同じで、何度も撮ったり編集したりしていると

作業量に合わせて必ず上達し、クオリティも上がりますので。

ということで、最後までお読みいただきありがとうございました。