シードプロッド最新ニュース

ビジネスの成長に役立つWordPressのチュートリアル、ヒント、リソース

WordPressにVimeoの動画を埋め込む方法

WordPressにVimeoの動画を埋め込む方法(ライトボックスポップアップ付き) 

執筆者 著者アバター ステイシー・コリン
著者アバター ステイシー・コリン
ステイシーはWordPressとデジタルマーケティングについて10年以上、その他のトピックについてはもっと長い間執筆している。また、ウェブデザイン、ユーザーエクスペリエンス、SEOにも造詣が深い。
     レビュー レビュアーアバター ターナー・ジョン
レビュアーアバター ターナー・ジョン
ジョン・ターナーはSeedProdの共同設立者です。彼は20年以上のビジネスと開発の経験があり、彼のプラグインは2500万回以上ダウンロードされています。

初めてWordPressにVimeoの動画を埋め込もうとしたとき、デフォルトのプレーヤーに引っかかり、見た目を変えたりカスタムサムネイルを追加したりする簡単な方法がありませんでした。Vimeoのリンクを貼り付けて素早く埋め込むか、SeedProdを使って独自のデザイン、自動再生設定、ブランディングを施したライトボックスポップアップを作成するかだ。

このガイドでは、あなたの動画がシャープに見え、訪問者の視線を釘付けにするために、その両方を行う方法を具体的に紹介します。

WordPressにvimeoの動画を埋め込む簡単な手順:

WordPressにVimeoの動画を埋め込むことはできますか?

はい、WordPressにVimeoの動画を埋め込むことができます。デフォルトでは、WordPressには自動埋め込み機能があり、動画のURLをコピー&ペーストして任意の投稿やページに表示することができます。

しかし、WordPressのデフォルト機能の多くがそうであるように、カスタマイズのオプションは限られています。ビデオプレーヤーのオプションを簡単に編集したり、カスタムサムネイル画像を追加したり、ユーザーがページをスクロールする際にビデオを「スティッキー」にすることはできません。

そこでこのガイドが役に立つ。

簡単なページビルダープラグインを使って、Vimeoの動画ポップアップをWordPressのページに埋め込む方法を紹介します。また、WordPressの自動埋め込み機能をサイト上のどこにでも使えるようにするための手順も紹介します。

なぜWordPressでVimeo動画を使うのか?

Vimeoは、高品質の再生、最小限の圧縮、プロフェッショナルなプレゼンテーションオプションで知られています。あなたのWordPressサイトで動画をシャープに見せ、スムーズにロードしたいのであれば、Vimeoは確かな選択です。

以下は、私が他のプラットフォームよりもVimeoのエンベッドをよく勧めるいくつかの理由です:

  • より良いビデオ品質:Vimeoは、邪魔な広告を追加することなく、より高いビットレートと解像度をサポートしています。
  • カスタムブランディング:プレーヤーの色を変更したり、Vimeoのロゴを削除したり、独自のコールトゥアクションを追加したりできます。
  • 高度なプライバシーコントロール:あなたのドメインに再生を制限したり、ビデオをパスワードで保護します。
  • より速いロード時間:動画ホスティングをVimeoのサーバーにオフロードし、サイトを軽量に保ちます。
  • クリエイティブ・コントロール:カスタムサムネイル、開始時間、ライトボックスポップアップを使用して、カスタマイズされた視聴体験を実現できます。

Vimeoの動画をWordPressに埋め込むと、視覚的なアピールが向上するだけでなく、訪問者をサイトに長く留まらせることができ、エンゲージメントやSEOにも効果的です。

目次

WordPressにVimeoの動画をライトボックスポップアップで埋め込む方法

SeedProd ドラッグ&ドロップWordPressウェブサイトビルダー

最高のドラッグ&ドロップWordPressウェブサイトビルダーであるSeedProdを使えば、Vimeoビデオの埋め込みは簡単です。100万人以上のユーザーを持つSeedProdを使えば、コードを書かずにWordPressのカスタムテーマやページレイアウトを作成できます。

あらかじめ用意されたテンプレートから始め、ビジュアル・ビルディング・ブロックを使って各ページをカスタマイズし、自分だけのページを作ることができます。

Vimeoビデオポップアップは?ビデオポップアップブロックを使えば簡単に埋め込むことができます。

ドラッグ、ドロップ、ポイント、クリックするだけで、好きな場所にフルスクリーンのVimeoライトボックスポップアップを表示できます。

以下のステップ・バイ・ステップのガイドに従って、その方法を学んでください。

ステップ1.SeedProdのインストールとアクティベート

まず、SeedProdプラグインをインストールして有効化する必要があります。

SeedProdの無料版もご利用いただけますが、ビデオポップアップブロックを含む、より多くのテンプレートやブロックにアクセスするには、SeedProd Proのご利用をお勧めします。

プランを選択し、プラグインをコンピュータにダウンロードした後、以下の手順に従ってWordPressサイトにSeedProdをインストールしてください。また、プラグインのライセンスキーを有効にする方法も説明します。

ステップ2.Vimeo Embed用のカスタムページレイアウトを作成する

プラグインを有効にすると、ドラッグ&ドロップでページビルダーを使用し、WordPressのカスタムレイアウトを作成することができます。

現在使っているWordPressテーマを入れ替えたい場合は、Theme Builderを使ってゼロから新しいテーマを作成することができます。

カスタムヘッダー、フッター、サイドバー、ホームページ、ブログページなど、サイトのあらゆる部分を構築できます。カスタムWordPressテーマの作成方法については、ガイドをご覧ください。

あるいは、ランディングページビルダーを使って個別のページを作ることもできる。

WordPressの管理画面からSeedProd " Landing Pagesに移動し、Add New Landing Pageボタンをクリックします。

新しいランディングページを追加 SeedProd

次に、レスポンシブランディングページのテンプレートを閲覧して、作成したいページのタイプに近いものを見つけます。より簡単にするために、上部にあるタブをクリックして、キャンペーンのタイプで絞り込みます。

ランディングページテンプレート SeedProd

見つけたら、テンプレートにカーソルを合わせ、チェックマークアイコンをクリックして選択します。

ページ名とURLを入力するウィンドウが表示されます。URLはSeedProdが自動的に生成しますが、クリックして新しいURLを入力することで変更できます。

ランディングページ詳細 SeedProd

詳細が決まったら、「保存してページの編集を開始する」ボタンをクリックします。

ステップ3.ビデオポップアップブロックを追加し、ソースとしてVimeoを選択します。

選択したテンプレートがドラッグ&ドロップエディターで開きます。ここでは、左側にページのライブプレビュー、右側にブロックとセクション、下部のツールバーにアンドゥ、リドゥ、プレビューのオプションが表示されます。

SeedProd ドラッグ・アンド・ドロップ・エディター

ライブプレビューでブロックをクリックすると、テンプレートのどの部分でも変更できます。クリックすると、左側のサイドバーにブロックの設定が表示され、コンテンツ、配置、フォントサイズなどを変更できます。

SeedProdブロックの設定

ページに新しいコンテンツを追加するには、左側のサイドバーからブロックを選択し、プレビュー上にドラッグします。そこから、ニーズに合わせてブロックの内容をカスタマイズするだけです。

SeedProdにブロックを追加する

リアルタイムで変更を確認できます。これにより、サイトのバックエンドとフロントエンドを切り替えて確認する手間が省けます。

ビデオ・ポップアップ・ブロックをページに追加しましょう。

ビデオ・ポップアップ・ブロック SeedProd

デフォルトでは、このブロックはYouTubeビデオを表示します。ブロック設定で「ソース」ドロップダウンをクリックし、Vimeoオプションを選択することで簡単に変更できます。

ビデオポップアップブロックのVimeoビデオソース

注:このブロックでは、WordPressに動画ファイルをアップロードすることもできます。

ステップ 4.Vimeoプレーヤー設定とライトボックスオプションをカスタマイズする

VimeoのURLを貼り付けてください。動画の開始時間を秒単位で設定することもできます。

そのセクションの下にはビデオ設定があり、有効/無効を設定できる:

  • オートプレイ
  • ミュート
  • ループ
  • ビデオプレーヤーのコントロール
  • プライバシー設定
  • イントロタイトル
  • イントロポートレート
  • イントロ・バイライン
  • スティッキービデオ
Vimeoビデオ・オプション SeedProd

パレットからカスタムカラーを選択することで、Vimeoプレーヤーのコントロールカラーを変更することもできます。

Vimeoビデオコントロールの色

では、「画像オーバーレイ」タブを開いてみましょう。このオプションを有効にすると、動画のカスタムサムネイル画像を設定できます。

Vimeoビデオのサムネイル画像 SeedProd

自分の画像を使う」ボタンをクリックし、パソコンやワードプレスのメディアライブラリからサムネイルをアップロードするだけです。

カスタムアイコンを選択し、そのサイズ、色、不透明度を変更することで、ビデオ再生アイコンにも同じことができます。

Vimeo動画再生アイコン設定

最後に、ライトボックスを有効にするトグルです。このオプションを有効にすると、ユーザーはフルスクリーンのライトボックスポップアップで動画を見ることができます。

Vimeoエンベッドのライトボックストグルを有効にする

気が散るのを抑え、聴衆を惹きつけることに集中するための優れた方法だ。

ステップ5.埋め込みVimeoでWordPressページを公開する

動画の埋め込みオプションに満足したら、画面右上の「保存」をクリックし、「公開」オプションを選択します。

WordPressでページを保存して公開する

これで、ページをプレビューして、埋め込んだVimeoビデオが動いているのを見ることができます。

WordPressページにVimeoビデオを埋め込むライブプレビュー

ビデオをクリックすると、ビデオポップアップが開きます。

WordPressのライトボックスポップアップにVimeoの動画を埋め込む

WordPressのサイドバーにVimeoの動画を追加したいですか?WordPressでカスタムサイドバーを作成する方法についてはこちらのガイドをご覧ください。上記と同じ手順でビデオポップアップブロックを追加してください。

カスタマイズやフォーマットのヒントについては、WordPressでランディングページを作成する方法についてのガイドをご覧ください。

プラグインを使わずにWordPressにVimeoの動画を埋め込む方法

ブログ記事など、シンプルで飾り気のない動画をウェブサイトに追加したい場合があります。ほとんどのページビルダーはページでしか動作しないため、WordPress の埋め込み機能を使用するのが最も簡単なオプションです。

自動埋め込み機能を使うか、WordPressの埋め込みブロックを使うかです。

自動エンベッド機能の使い方はこちら:

方法1:Vimeo動画のURLをWordPressエディターに貼り付ける

まず、WordPressの投稿またはページを作成または編集します。そして、VimeoビデオのURLをコンテンツエディターに貼り付けます。

WordPressでvimeoビデオを自動埋め込み

WordPressは自動的にVimeoのビデオを埋め込み、数秒で表示します。

方法2:WordPressのVimeo埋め込みブロックを使う

または、プラスアイコンをクリックして新しいブロックを追加し、Vimeo Embedブロックをクリックすることもできます。

Vimeo埋め込みWordPressブロック

次に、動画のリンクを貼り付け、埋め込みボタンをクリックします。

VimeoビデオのURL

投稿やページを公開した後、プレビューして変更内容を確認することができます。

WordPressの投稿にVimeoの動画を埋め込む

Vimeoビデオを埋め込む FAQ

埋め込みビデオURLとは何ですか?

埋め込み動画URLとは、ウェブサイトに直接追加された動画とソーシャルメディアの動画共有サイトからの動画のことです。例えば、WordPressサイトに埋め込まれた動画URLとVimeo.comのソースの比較です。

WordPressにVimeoショーケースを埋め込むことはできますか?

WordPressのサイドバーにVimeoの動画を表示したい場合は、WordPressのVimeo埋め込みブロックを使用できます。または、動画埋め込みコードをコピーしてHTMLブロックに貼り付けてください。

iFrameを使わずにVimeoのビデオを埋め込むには?

iFrameを使わずにVimeoの動画を埋め込むには、動画のウェブページにアクセスし、共有ボタンをクリックします。ポップアップボックスで、「+show options」テキストをクリックし、一番下までスクロールしてサイズを「Responsive」に変更します。これで、HTMLコードからiFrameが削除されます。

iFrameなしでVimeoのビデオを埋め込む

そこからコードをコピーして、ウェブサイトのHTMLウィジェットに貼り付ける。

今すぐWordPressにVimeoの動画を埋め込む

このガイドが、WordPressにVimeoの動画を埋め込む方法を学ぶのにお役に立てば幸いです。ウェルカムメッセージとして、ウェビナーのイントロとして、あるいは新製品の発売を宣伝するために、このガイドの手順は必要なすべてをカバーしています。

その他のビデオヘルプについては、以下のチュートリアルやショーケースもお勧めです:

お読みいただきありがとうございました!あなたのご意見をぜひお聞かせください。YouTubeXFacebookで、あなたのビジネスを成長させるために役立つアドバイスやコンテンツを提供していますので、お気軽に会話にご参加ください。

著者アバター
ステイシー・コリン ライター
ステイシーはWordPressとデジタルマーケティングについて10年以上、その他のトピックについてはもっと長い間執筆している。また、ウェブデザイン、ユーザーエクスペリエンス、SEOにも造詣が深い。

情報開示私たちのコンテンツは読者支援型です。つまり、あなたが私たちのリンクをクリックした場合、私たちはコミッションを得る可能性があります。私たちは、読者に付加価値をもたらすと信じる製品のみを推薦します。